Lightbox OnLoad - Add An "x" Graphic In The Top Right Corner Of The Projected Image To Close The Banner And Return To Veiwing Our Site?
Mar 25, 2010
I am a systems analyst and network admin for [url].... We already have an exisiting site, which has JS. We now need to add a lightbox effect onload that will basically overlay the page in grey and focus on a banner before you can access it. Thus, pushing everyone who visits to read a banner. I would also like to add an "x" graphic in the top right corner of the projected image to close the banner and return to veiwing our site.
I am trying to dynamically close a div overlay. I have an x that dynamically appears, then closes when the user presses it. I want the overlay to also close when the user clicks the close button. So far I've tried to bind the click event to my button but its not working.
CSS: div#testbutton{} HTML <a href="#" id="testbutton"><img id="testbutton" class="close" src="/images/common/button-close.gif"/></a>
I have a problem on a Wordpress website: I gave certain pictures (as elements of the layout) rounded corners with a jQuery plugin. Some posted pictures I want to load with Lightbox (or similar). I have used several different Lightbox plugins for Wordpress (Lightbox 2, jQuery Lightbox, Simple Lightbox etc. etc.) but none of them work. I got some weird version of GreyBox working but FireFox gives an error every time before opening it so that's real shady code. As you can see on this page is that I include jQuery for the rounded corners at first but then the Lightbox plugin automatically adds it's own version of jQuery and they cancel each other out. I know for a fact this is the problem because I 'lose' the rounded corners as soon as I turn ON the Lightbox plugin. Once that is turned off the nice rounded corners show again. I tried several different plugins, changing the order of the jQuery code around, making both the rounded corners plugin and Lightbox rely on one single jQuery statement. Nothing has worked so far.
I know very little about jQuery. I am trying to design a graphic menu bar that is capable of displaying each button in 4 modes: up (neutral), hover, down (mouse down), and selected. After some research, I was able to "come up" (by cutting and pasting and burning up a couple of neurons) with the code below. It works well enough but I'm sure it could be written a lot better. What I really would like to do is to change whatever button is "down" to go back "up" once another button is pushed, changing the img src, or by whatever method is more efficient.
What I want to be able to do is to display this div with Lightbox but do it from JavaScript. For example, from the body onLoad event I would like to call a JavaScript function that opens a Lightbox.
Then, the Lightbox is going to contain a few fields so I was going to have JavaScript validate that the user entered all the fields. If they did, I then want to close the Lightbox. If they did not, I will display an alert message. I can get all of this to work except having JavaScript close (actually, it is hiding) a Lightbox div. Can someone help me figure out how to hide the div from a JavaScript function?
What I downloaded was Lightbox Gone Wild which I think is also called Leightbox.
1) I'm using a lightbox script (namely URl... but I don't think that matters in this case).
2) Since the lightbox scripts appears to intercept the 'onclick' event, I have to use 'onmouseup' to call the ajax, which is not a problem, just a note.
3) My link is: <a title="Click to View Logo" onmouseup="getLogo('44');" href="#displayimage" rel="displayimage" class="lbOn">
4) The javascript function 'getLogo' calls an ASP page which then feed the logo back to a div with ID "displayimage"
5) I have tried to add the following code to the ASP page to close the lightbox, but it does not work: <a href="#" class="lbAction" rel="deactivate"><img src="_images/button_close.png" /></a>
6) If I add the code above to the page itself (rather than from the ajax call), it successfully closes the lightbox, so I know the code itself is fine
Can I use the lightbox to call multiple DIV tags? Since the ajax call loads the content of the ASP page into the div (replacing what may have been there of course), I cannot place the "close" script into the "displayimage" div.
i am pretty new to jquery and hope this is the right place to ask. my problem is the following. when i mouseover a certain element on a page, i want that a certain image is displayed in the top right corner of the page, no matter where the it is currently scrolled. how can i achieve that?
How can I make it to where an image will load in the corner of a website?Specifically, I have part of a template I want all people to see, however, some people either get it cut off or not shown at all because of their resolution.
I want to find a way to place a button at the bottom right corner of an image. The button should still be inside the image, not under the image. How? I know how to create a link button using FORM and INPUT tag, but can I use innerHtml to insert the button into the IMG tag? If not, how to do it? I tried, but the button is always outside the image.
I'm looking for a cross-browser (IE, Netscape, Mozilla/FireFox, Opera, Safari) javascript that will keep an image (or <div>) in the lower right corner of the browser window whenever part of the web page has been scrolled vertically. I did find a script on the internet that was supposed to fit my needs, but I found it didn't work as advertised. (I included that script below.)
Requirements: - I'm using "Frames" and the frame I want the image/div to appear in is the main content frame that sits against the right and bottom edges of the browser window. So the lower right corner of the browser window is the same as the lower right corner of my frame. - (optional) If the frame content is small enough such that there are no scrollbars or if the page has not been scrolled vertically, then I don't want the image (or <div>) to appear. - the placement of the image/div needs to take into account the width of the scrollbar(s). - my focus is to display a button in this lower right corner that, when clicked, will scroll the page to the top.
I found the following script on another site that claims it would do most of this, cross browser, but I was only able to make it work with IE (and I'm using IE 6.0). When I tried it with Netscape 7.1, Firefox 1.0 (Mozilla 5.0) and Opera 7.54, the button didn't float as the page scrolled. I checked browser settings and javascript is turned on for all the browsers.
Can someone point me to a javascript that will do what I'm looking for, or help me understand why the following script isn't working cross browser? I've worked with javascript and the DOM somewhat, but am not a Master of the subject matter, especially when it comes to cross browser issues.
Thanks, and here are the instructions and script that I mentioned above (that I had founed from another site):
Place the watermark on your page where you want it to appear on non-DHTML browsers (say, the bottom). Then nest it inside a <DIV> tag with the attributes id="waterMark" and style="position:absolute". Code:
I have seen this script a few places, not sure it was jquery but I figured it was.
I am looking for a script that opens a lightbox when someone moves the mouse over to close the browser window or change the url or type in the search bar, a lightbox pops up.
I spend a bit of time searching and can't find the script.
I have a jQuery script that when you hover over a link a text bubble on mouseover will pop up... but I am trying to make the text bubble load when the webpage does instead of having to hover over the link. ( instantly load the text bubble when the page does )
Imagine a wife has signed on to a web site in a browser tab. She does not sign off and walks away to do something else. Her husband sits at the computer and seeing her signed on, opens a new tab and tries to sign on to the same site.
I am trying to write a script that will close other tabs/windows when the husband goes to the same site to sign on.
So, on the sign on page (or even better, the sign off page), when the sign on button is clicked, a piece of Javascript code is run first. The javascript simply goes through all tabs on the browser, and checks to see if any such tabs has an HTML document that came from the same domain as the sign on page. If such tabs exist, then before POSTing the user name and password to the server, the Javascript code will close those tabs that contain HTML documents came from the same domain.
So, I understand I need to set the window.name to a specific value. But does anyone know what the code on the sign on/sign off page to close the other tabs/windows would look like?
Imagine a wife has signed on to a web site in a browser tab. She does not sign off and walks away to do something else. Her husband sits at the computer and seeing her signed on, opens a new tab and tries to sign on to the same site.
I am trying to write a script that will close other tabs/windows when the husband goes to the same site to sign on.
So, on the sign on page (or even better, the sign off page), when the sign on button is clicked, a piece of Javascript code is run first. The javascript simply goes through all tabs on the browser, and checks to see if any such tabs has an HTML document that came from the same domain as the sign on page. If such tabs exist, then before POSTing the user name and password to the server, the Javascript code will close those tabs that contain HTML documents came from the same domain.
So, I understand I need to set the window.name to a specific value. But does anyone know what the code on the sign on/sign off page to close the other tabs/windows would look like?
I have a client that owns 2 domains pointed to one site. They want their site to display a different banner depending on which url the user uses. I thought using location.host would do the trick, but the host property value is always the main url - not the secondary url:
I need to stretch my banner Image at the top of the page to the whole of the page. The development computer on which I was working for this site displayed it correctly. Today when I opened the code in another compter the top banner image didn't display itself for the whole of the page. It just contracted to the left side. I am wondering how do do it. Well I used background-image:100% but that didn't work(CSS3 compatibility issues). Any tips to stretch this top banner to the whole of the page in every computer.
It works normally - but don't work lightbox script for pictures of the site, so IE 8 write such: Object doesn'n work with prototype.js and mootools.js. CMS is a MODx, please, tell me how to make work this scripts correctly and together?
i have a sliced page from photoshop. how i can change the main banner part at the top so that it gradualy changes over a period of time, i was thinking maybe a swap image thing, but not sure.
