|
JavaScript - Hide Image + Fadein
http://dannycremers.com/menus.html
i've been experimenting with random images floating in the background that i now want to turn into links to other images, the code i have right now is the following: Code: <div id="div2"><a href="#sub_target" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/img/2.png" alt="" /></a>
<div><a href="#" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/inprogress/img/koekoek.jpg" alt="" /></a></div></div>
image 2.png is the image with the black border, onclick of that image i want the orange picture to become visible in the center of the page which sort of works.. but for some reason when the page loads an extra version of the orange image shows up as well, any idea how i can get rid of this while also maintaining the orange image showing up onclick?? another issue i've been having is with the fadein code, it always used to work but after adding the onclick/toggle script it stopped working, does anybody have any idea why that is and how i can work around that? tnxxx! Similar TutorialsHi all, I have set my sprite on this page http://www.kylehouston.com/portfolio.html to fade in, my problem is when the page loads the images appear and then they fade in, how can i set them to fade in without showing them first of all? Thanks in advance Kyle Hi, I am looking for a script which could do picture animation like in this page But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds. 5 sek. to become colored, 5 sek. to become grey when you put away your mouse. If you need more info, ask.. Thanks a lot. hi, i am trying to have the homepage of my website fade in, kind of like an intro to the site. I only want this fade in to happen on the home page when the website is initially visited, not every time the user clicks home. I am new to jquery but have had much success using plugins for effects. If anyone can help me figure out the code to create a fade in intro i would be very thankful! Richard Greetings everyone; Jesse here. Long time reader, first time poster. I have a personal website, currently in development, located at: http://www.jesselang.ca If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar. This functionality is "OK" at best. What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows. The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal. Code: <script type="text/javascript">
lastone='empty';
function showIt(lyr)
{if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';}
</script>
The respective html looks something like this: Code: <a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>
The coresponding html for the container to display looks like this. This code also shows the "hide container" button: Code: <div id="interestcontainer" style='display:none;'>
<h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>
And the CSS looks like this: Code: a.arrow{
display:block;
float:right;
background:url(../images/ico-arrow.gif) top no-repeat;
text-decoration:none;
overflow:hidden;
width:13px;
height:11px;
margin-left:3px;}
------------------ Would it be asking to much to have someone help me achieve the following functionality? -load page with all side containers hidden -display only 1 side container at a time -fadein and fadeout effects -same button displays and hides -button swaps images for displat/hide commands Again, my code can be seen at: http://www.jesselang.ca http://jesselang.ca/files/style.css I'd very much appreciate the help. Thank you in advance. *j I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[ Code: var windowState = false;
action1 = document.getElementById("action1");
function requestWindow(url) {
if(windowState==false) {
windowOpen();
}
else if(windowState==true) {
windowClose();
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('action1').innerHTML=xmlhttp.responseText;
}
function windowOpen() {
windowState = true;
windowSize()
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
function windowClose() {
windowState = false;
action1.style.display = "inline";
$("#action1").fadeOut(1300);
clearMenu();
windowOpen();
}
Ok super new to Jquery here. I finally got talked into trying it. Ok so... I have Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.style.filter = "alpha(opacity=" + (0*100) + ")";
action1.style.opacity = 0;
var si = setInterval(function() {
io+=0.05;
action1.style.filter = "alpha(opacity=" + (io*100) + ")";
action1.style.opacity = io;
}, 100);
io = 0;
if(io==1) {
window.clearInterval(si);
}
clearMenu();
}
I would love to know how to replace that with the fadein() function. I'm looking for something like this Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
//THE FADE IN GOES HERE but how?
clearMenu();
}
ok last question. Do I need to hide my elements somehow differently in CSS before I can use this? update: ok so far trying this and its not working Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.fadeIn('slow');
clearMenu();
}
finally made it work with Code: function windowOpen() {
windowSize()
action1.innerHTML = '';
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it do anyone know, how can i write fadein and fadeout functions? is anyone know its source code? Best Morteza Hi guys, Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item. The code I am using is the following Code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function mainmenu(){
$("#neon li.root").hover(function(){
$(this).fadeOut('500');
},function(){
$(this).fadeIn('500');
});
}
$(document).ready(function () {
mainmenu();
});
</script>
<style type="text/css">
/* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}
/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}
/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}
/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}
/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}
.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}
</style>
<ul id="neon" class="neon">
<li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
<li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
</ul>
Any help would be appreciated! Thanks! It's functional and works, it just doesnt "fade in". Anyone know why it's not fading in? Code: function addPerson() {
//current keeps track of how many people we have.
var strToAdd = '<div id="input" class="ideaInput"><label class="idea">Another Name</label><input name="idea[]" class="idea" type="text"/>'
strToAdd += '<label class="description">Description (optional)</label><textarea name="description[]" class="description"></textarea></div>'
$('#all-inputs').append(strToAdd);
};
$(document).ready(function() {
$('#btnAdd').click(function () {
$(addPerson).fadeIn('slow')
});
});
Hi, fairly new to js. I have an image Code: <img src="uploading.png" /> I want to be able to have this hidden as default then when i submit my page <form action="handleupload.php"> it appears Hey all, I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load. I'm clueless as to how to do this. Here's my code for the image attached: Code: <div class="colour-picker"> <div class="tick-off" id="red" onclick="changeclass();"> </div> <div class="tick-off" id="blue" onclick="changeclass();"> </div> <div class="tick-off" id="black" onclick="changeclass();"> </div> <div style="float: right; margin-right: 6px;">Choose colour:</div> </div> CSS: Code: .colour-picker {
float: right;
margin: 0 10px 0 0;
line-height: 30px;
text-shadow: #292929 2px 1px 1px;
font-size: 15px;
color: #FFF;
padding: 0px;
height: 32px;
font-weight: normal;
}
.colour-picker #red {
background-color: red;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #blue {
background-color: blue;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #black {
background-color: black;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker .tick-off {
background-image: none;
}
.colour-picker .tick-on {
background-image: url(images/colour-tick.png);
background-repeat: no-repeat;
background-position: center center;
}
Can anyone tell me how to do it? Thanks! Adam Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hey everybody, I have a script that hide a div like in a menu, bur the text of the div dont hide.... Code: <script>
function aumenta(id) {
target = document.getElementById(id);
setInterval(function(){
new_size = target.style.height;
new_size = new_size.split("px", 1);
new_size -= 10;
new_size = new_size + "px";
target.style.height = new_size;
//target.style.width = new_size;
},1);
}
</script>
</head>
<body >
<div id="da" style="width:300px; height: 300px; background-color: #0066CC;" onmouseover="aumenta('da')">dDffffffffffffffffffdsdsd</div>
</body>
What part I have to fix in my code, for do what I want? Thanks! Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help. In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible. I have no idea how to code it, but it seems like the general logic would be something like this: <div id="prodprice" style="display:none">{tag_saleprice}</div> document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block"; Am I totally off base? I just have no idea what to do and I have an impatient client! Thank you so much. I want to be able to hide a DIV within an iframe from the parent document. The usual document.getElementById('element').style.display="none"; doesn't work as I can't point to elements within the iframe with it. What do I need to add to make it look within the iframe and not the parent document? Many thanks in advance. hi i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files) Now what i need is, onclick of HOme button.. i have written a code like <a href="main_Home.html" onclick="updateObject(this); return false;"> and the javascript i got from dhtml goodies is <script type="text/javascript"> function updateObject(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } </script> now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there.. Pls help.. |
|||||||