Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 8, 2008, 01:20 PM   #1
Sdashiki
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
Hiding URL title="text" on mouse over?

Ok, strange conundrum. I am using Lightbox to the point where Ive hidden alot of html within the "title" variable of the the <a> link tag.

So, whenever you hover over the image you would click to bring up a lightbox, you see the title text...which in my case happens to be a few hundred characters of html...and not, say, "Image of a Frog" as it would normally be.

How do I either hide or change what is displayed on mouseover? Java, css, html whatever, something simple though, would be nice.

I may have put myself into a corner by doing what ive done to the lightbox html, but it works otherwise just fine.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 8, 2008, 01:23 PM   #2
Mitthrawnuruodo
Moderator
 
Mitthrawnuruodo's Avatar
 
Join Date: Mar 2004
Location: Bergen, Norway
WZ Tooltip

Edit: Wait... hiding?
__________________
Those who fail to learn history are doomed to repeat it; those who fail to learn history correctly... why, they are simply doomed.
Mitthrawnuruodo is offline   0 Reply With Quote
Old Dec 8, 2008, 02:51 PM   #3
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Are you talking about the yellow box that pops up when you hover over the image? That's not from Lightbox. The best thing to do would be to remove all that HTML from the title tag, it's not valid to be there anyways if it's HTML.
angelwatt is offline   0 Reply With Quote
Old Dec 9, 2008, 09:42 AM   #4
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
I realize that, but without getting into hardcore lightbox coding, its the best way to make my popup work. Validity means nothing to me on this website.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 9, 2008, 11:35 AM   #5
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by Sdashiki View Post
I realize that, but without getting into hardcore lightbox coding, its the best way to make my popup work. Validity means nothing to me on this website.
Can you elaborate on what you're wanting, because it's a bit confusing? Some examples and maybe a link to the page would be beneficial.
angelwatt is offline   0 Reply With Quote
Old Dec 9, 2008, 01:19 PM   #6
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
Quote:
<p><a href="../images/examples/spectra.jpg" rel="lightbox" title="

<p><b>Credit: <a href='http://www.flickr.com/###' >name</a><br />
<i>Spectra QPS</i></b></p>

<p><em><strong>Polaroid Spectra</strong></em></strong></p>
<p><strong><em>Tips &amp; Tricks</em></strong></p>

">

<img src="../images/films/spectra.jpg" /><strong>Spectra / Image</strong></a></p>
Is the code.

As you can see I have hidden alot of this html inside the title of this particular link. The rel="lightbox" makes it so when you click this link (an image as you can see by the end of the code) it pops up a "lightbox" window. Typically this only allowed you to put a caption using the title attribute. BUt I found you can "hide" html code inside the title tag and through CSS, format a nice popup window. Thats why there are so many odd tag combinations, classes wouldnt work.

Its a not a DIV popup by any means, and all the solutions I found were far to complex for my simple needs.

in any case, because the title attribute contains all the code above, when you hove over the image/link, the little yellow box in FF and IE show the title text...which is html gobbly gook.

Not a huge deal, but kinda distracting when IE6 makes the entire title show and its long.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 9, 2008, 02:27 PM   #7
morespce54
macrumors 65816
 
morespce54's Avatar
 
Join Date: Apr 2004
Location: Around the World
I don't think there is any way to hide the content of the title tag for all browsers. The only way would be to leave it empty...

Even if you write a JS (and I can't think of any kind of script that would remove the content of the title tag without breaking your code), that would have to run after the page loaded. That would considerably slow down your page loading time.

Actually, the best way would probably have been to write a JS that write your lightbox code on the fly (within the title tag or not) when you click the href...

Something like: <a href="javascript:myLightboxScript(variable1, variable2, variable3);">Some Link</a>
__________________
..:.::.:.:.::..:.: Oh, I get it. It's very clever :.:.::.:.:.::.:..:.::..:.::.:..:.::.:.::.:.::..
DO NOT OPERATE YOUR COMPUTER UNDER THE INFLUENCE!

Last edited by morespce54; Dec 9, 2008 at 04:28 PM.
morespce54 is offline   0 Reply With Quote
Old Dec 9, 2008, 04:47 PM   #8
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
It would take a bit of a hack to do what you want with Lightbox. Mt recommendation is to use one of the many Lightbox clones. Highslide in particular can do what you want with needing a hack.
angelwatt is offline   0 Reply With Quote
Old Dec 10, 2008, 08:27 AM   #9
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
That was one of many Lightbox clones I was looking at. But, like most, it was far too much for my needs.

I just want a popup with html in it. Thats it.

Seems like no one wrote something that simple, instead they give you everything.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 10, 2008, 08:31 AM   #10
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by Sdashiki View Post
That was one of many Lightbox clones I was looking at. But, like most, it was far too much for my needs.

I just want a popup with html in it. Thats it.

Seems like no one wrote something that simple, instead they give you everything.
Just because it provides more, doesn't mean you have to use it all. The setup is very similar to LightBox, so isn't going to be anymore time consuming and will leave you with a better result than trying to find a hack.
angelwatt is offline   0 Reply With Quote
Old Dec 10, 2008, 10:05 AM   #11
Mitthrawnuruodo
Moderator
 
Mitthrawnuruodo's Avatar
 
Join Date: Mar 2004
Location: Bergen, Norway
Quote:
Originally Posted by Sdashiki View Post
I just want a popup with html in it. Thats it.

Seems like no one wrote something that simple, instead they give you everything.
Ah... then we're back to WZ Tooltip, after all...
__________________
Those who fail to learn history are doomed to repeat it; those who fail to learn history correctly... why, they are simply doomed.
Mitthrawnuruodo is offline   0 Reply With Quote
Old Dec 10, 2008, 02:06 PM   #12
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
http://www.willmaster.com/blog/css/s...oating-div.php

Seems my solution...ill give it a go.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 11, 2008, 07:10 AM   #13
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
As a plan "B" using your original title with the HTML (if the tooltip approach fails for you), have you tried this simple approach to null the title?

[HTML]<p><a onMouseOver="javascript: this.title='';" href="../images/examples/spectra.jpg" rel="lightbox" title="...your original HTML stuff...">test</a></p>
[/HTML]

Tested, works. Add the OnMouseOver attribute and value to your anchor tag. Javascript rocks, eh? "this" represents the anchor tag as a node, allowing you access to the title attribute, set it to nothing or whatever you want. Note, the tooltip approach is a lot nicer looking anyway! I'd go that route even if you got this to work!
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Dec 11, 2008 at 07:48 AM. Reason: fixed a typo
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 11, 2008, 10:19 AM   #14
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
wztooltip saved the day.

wish it was a TINY bit more configurable (like a border around the title would be nice, instead it just uses a background color and covers the border)

But, after a bit or moving my horrible hack code, its all good now.

Very happy with it.

THANKS!

and thanks for the tip on hiding the title, that is useful on other pages.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Dec 11, 2008, 10:53 AM   #15
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: USA
Quote:
Originally Posted by SrWebDeveloper View Post
As a plan "B" using your original title with the HTML (if the tooltip approach fails for you), have you tried this simple approach to null the title?

[HTML]<p><a onMouseOver="javascript: this.title='';" href="../images/examples/spectra.jpg" rel="lightbox" title="...your original HTML stuff...">test</a></p>
[/HTML]

Tested, works. Add the OnMouseOver attribute and value to your anchor tag. Javascript rocks, eh? "this" represents the anchor tag as a node, allowing you access to the title attribute, set it to nothing or whatever you want. Note, the tooltip approach is a lot nicer looking anyway! I'd go that route even if you got this to work!
Just curious, by removing the text of the title onmouseover, would the text return onmouseout? I didn't try this out so wasn't sure off hand, but I think he was wanting to keep the contents of the title attribute preserved since it was being used as a caption. The JavaScript aspect of course could be updated to preserve that title content, but wasn't sure if your suggestion was completely removing the content or not.

Glad to hear the OP has a working solution.
angelwatt is offline   0 Reply With Quote
Old Dec 11, 2008, 11:29 AM   #16
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
@angelwatt:

If the title value had been lost then a copy of the attribute value would be needed by adjusting Lightbox code. The whole concept of using HTML in the title is just plain wrong anyway. So if it ended up that way, I feel it's a waste of time to re-code Lightbox to mirror the value, might as well use that time and energy and do the tooltip. That occured, and it's the best thing overall - not only does it look better, but no standards are broken. That's a winner for the OP.

The OP took my advice as intended, just a cool HTML trick for the future.

-jim
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 12, 2008, 12:22 PM   #17
Sdashiki
Thread Starter
macrumors 68040
 
Sdashiki's Avatar
 
Join Date: Aug 2005
Location: Behind the lens
Im using the WZtooltips allover this new section of my website.

I just wish there was some sort of option to make it grey out the background like lightbox does.

Some of the "tooltips" are more like popup divs.
__________________
The real problem is not whether machines think but whether men do.
- B. F. Skinner

Like Polaroid?
Sdashiki is offline   0 Reply With Quote
Old Sep 14, 2011, 06:26 AM   #18
Alk8611
macrumors newbie
 
Join Date: Sep 2011
Help needed Sdashiki

Dear Sdashiki, I am facing the exact problem with lightbox and can't figure out what to do with the title on mouseover. My description of the title is in HTML and thus I don't want it to show in mouseover and only in the lightbox. What did you do to solve your problem. What did you change in the js file or HTML or CSS. I am really lost and need your help desperately.

Regards

Alk8611




Quote:
Originally Posted by Sdashiki View Post
Ok, strange conundrum. I am using Lightbox to the point where Ive hidden alot of html within the "title" variable of the the <a> link tag.

So, whenever you hover over the image you would click to bring up a lightbox, you see the title text...which in my case happens to be a few hundred characters of html...and not, say, "Image of a Frog" as it would normally be.

How do I either hide or change what is displayed on mouseover? Java, css, html whatever, something simple though, would be nice.

I may have put myself into a corner by doing what ive done to the lightbox html, but it works otherwise just fine.
Alk8611 is offline   0 Reply With Quote
Old Sep 15, 2011, 12:17 AM   #19
Laird Knox
macrumors 65816
 
Join Date: Jun 2010
Quote:
Originally Posted by Alk8611 View Post
Dear Sdashiki, I am facing the exact problem with lightbox and can't figure out what to do with the title on mouseover. My description of the title is in HTML and thus I don't want it to show in mouseover and only in the lightbox. What did you do to solve your problem. What did you change in the js file or HTML or CSS. I am really lost and need your help desperately.

Regards

Alk8611
Wow, good luck getting him to check a three year old thread.
Laird Knox is offline   0 Reply With Quote
Old Mar 14, 2012, 07:14 AM   #20
renier
macrumors newbie
 
Join Date: Mar 2012
Dono if anyone is still struggling to find a solution to this, thought i might give it a try.

If what you want to do is hide the title attribute when you mouseover a tumbnail but still keep the title so it appears as a discription for the fullsize lightbox image then try this:

instead of using the title="description" in your link, try calling the title onclick.

example:

if you have
<a title="Discription" href="fullsizeimage.jpg"></a>

replace the title="Description" with onclick="javascript: this.title='Description' ;" onMouseOver="javascript: this.title=' ' ;"

so it will look something like this:

<a onclick="javascript: this.title='Description' ;" onMouseOver="javascript: this.title=' ' ;" href="fullsizeimage.jpg"></a>

this will call the title only when the link is clicked and not show the title when you hover over it again.

Hope this helps!
renier is offline   0 Reply With Quote
Old Nov 7, 2012, 08:46 PM   #21
elhz
macrumors newbie
 
Join Date: Nov 2012
using description for title

To renier

I see this thread is kind of old, hope you are still checking it. I tried your solution and it worked as far as the code not showing up with a mouseover on the thumbnail, but my images are in a gallery and when I clicked the next arrow from the large image, when the next image loaded it didn't show the title/description at all. It only shows it if you click on the thumbnail.

I should mention I'm using the fancybox version of lightbox.
elhz is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
"Bold text" makes the text a bit blurry on my r mini FatPuppy iOS 7 2 May 19, 2014 12:16 PM
"The requested URL was not found on this server." s4steve23 iPhone Tips, Help and Troubleshooting 0 Sep 7, 2013 10:51 AM
OS X: CS:GO "command" + "left mouse click" causes "right mouse click" Whats wrong? oeppel Mac and PC Games 1 Apr 6, 2013 03:12 AM
Resolved: "Hiding" init method MickeyT iPhone/iPad Programming 10 Feb 20, 2013 02:49 AM

Forum Jump

All times are GMT -5. The time now is 11:44 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC