I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception. When you hover over it and a black bubble appears. Also I'm not sure what it is called.
Is it possible to pause images when the user mouse overs an image. For example, I need to adapt the Javascript on this site to incorporate a pause when the user hovers over the image.
I'm looking for a javascript/css code that can do the following, for a click button:
- When mouse is not over the click-button, a text should be displayed at the right of the button, in a bordered textbox - 85% transparency (hardly visible)
(- when mouse hovers over the button, the button image changes to a different one <- I know how to do this)
- When the button is clicked the text shows up normaly (0% transparency)
- When clicking again the button OR anywhere else on the page, the text goes back to 85% transparency.
I was wonderring if there is a way to create a script thatcan be use as a popup when a user enter my site, not just popup but comes in as a little button and then opens up like thoes popups or popovers (layers). can this be done?
I've been looking all over the place in order to find a script like they use on Foliostars, where you see a sliding semi-transparant text layer over a thumbnail image when you hover. how to achieve this using JS or an Ajax framework (preferably JQuery)?
I'm new to DOM and javascripting and have constructed a hide/show menu. I can't find a way to keep IE6 from revealing all the sub-lists onload. The code (inspired by PPK and Jeremy Keith's recent books) follows:
window.onload = function () { var topnav = document.getElementById ("navmain"); var parent = document.getElementsByTagName("ul"); for (var i=0;i<parent.length;i++) { if (parent[i].className != "section") continue; parent[i].style.display = "none"; var header = parent[i].previousSibling; if (header.nodeType != 1) header = header.previousSibling; header.relatedTag = parent[i]; header.onclick = openClose; } } function openClose () { var currentValue = this.relatedTag.style.display; var newValue = (currentValue == "none") ? "block" : "none"; this.relatedTag.style.display = newValue; } Markup: <div id="navmain" class="clearfix"> <ul><li><h4>Markets</h4> <ul class="section"> <li><a href="/corporate/">Corporate</a></li> <li><a href="/govt/">Govt/Agency</a></li> <li><a href="/municipal/">Municipal</a></li> <li><a href="/mbsabs/">MBS/ABS/CDO</a></li> <li><a href="/funding/">Funding</a></li> </ul> </li></ul> </div>
Hoping for some simple solution, but all advice is welcome.
I am having trouble with the following code. Right now the user clicks the button and it shows all of the blogs from the blog array. However I want it to just reveal 2 then two more and two more and so on as the user clicks button. I have tried multiple things but can't seem to get it right. Most of the things i try either reveal the entire blog on start or when the user clicks hides all of them.
I need to implement a pretty basic javascript functionality in my site, but have never used it and wonder if there is a script available or if someone can give me the basics. I have a nav bar at the top of the page with four links, and then divs for each of the links. The link you click on displays the associated div and hides the rest of them. Pretty simple, right?
I'ld like to insert a feature seen in www.k10k.net and www.rangermag.com whereby once a link is clicked it instantly reveals a hidden layer - seems a great way of quick navigation of info.
I am a relatively inexperienced programmer and what I want to do here is to have an onClick for a div that reveals a random hint (one at a time) from a selection of 3 (they are all currently on top of eachother and hidden using body onLoad.)
I'm using a bog standard script which reveals content when something is clicked. This script works fine everywhere else (or it did before I tweeked it a bit to get it to work on this one page; an easy thing to do), however, on this one page, it shows the content, but messes up the layout.
I am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs - works fine with IE but no others.
<html> <head> <script language="javascript"> var descriptions = new Array(); descriptions[0] = "<p>See whats been added to the web site recently</p>"; descriptions[1] = "<p>Find out more about me</p>"; descriptions[2] = "<p>Check out me links</p>"; function showDescription(descriptionIndex){ .....
I have hidden div, that i want to show by sliding it in from topborder.The problem is that i don't know how to make it "slide in" instead of"wipe in".I want it all to move with it's content instead of showing more andmore of it.
I'm failing to get a pure CSS way to achieve this, so trying JS. Several small images in a row, each different. Want mouseover to:
1. change each image to different image on mouseover (each image has its own mouseover image version).
2. produce different paragraph of text below row of images on each mouseover.
I can achieve it with mouseover on text links or on an image, but not with the two events, viz mouseover image swap + mouseover text swap. Would also want to be able to style the text.
I want function to present something.png instead of the text for Good Morning etc.if (houris >17) display =gm.png;in this fashion.Also IE8 reports "clientside is undefined" as an error message, occasionally.My javascript knowledge is still rudimentary.
I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one.
I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: [URL]
You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here.
I'm totally new to JavaScript, and haven't been able to find the answer to that on the web:
I have an image and want to use an imagemap in a way that when the cursor touches a certain point there's some text (possibly moving/scrolling) displayed on/over the image.
In concrtene: I have a face, and when touching the eye with the cursor I want to print "seeing" in the screen.
Instead of doing a regular rollover which would require me to make 50 images with text in photoshop on I want the rollover but want to add the the text in html for exmaple I want something like this [URL]
function greet() { var hour = (new Date()).getHours(); var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" ); document.write('<img src="' + when + '.png" alt="Good ' + when + '"> ');}
This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text. It's a bit ostentacious as it is.. Site is here. [URL]
I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text.
<span id = "dj" style="font-size:12px; font-weight:bold; font-family: Tahoma; color: #6600FF;"></span> <script type = "text/javascript">
I want that on the page visible to user, there is a text box, User can specify full path to an image in this text box, and once user clicks on apply button. then this image is set as the background image for a div.How should this be coded?
i have a script that is close to working, but not quite. it loads 1 of 9 random images on pageload with the corresponding link on the image. that works fine. i am trying to also get the corresponding copy to appear next to it, but it seems to be totally random as well and not matching up with its proper image (for example, if image 5 loads, then copy 5 should be the one that loads). below is what i have.
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">