Develop Reference

Show/Hide feature [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a feature using either jQuery or vanilla JS. My feature should be able to show/hide content on click. The initial task is easy enough and I'm able to show my hidden div using jQuery toggle, but I would also like to be able to switch my FA icon as well as the link text from 'Show content' to 'Hide content'.

Use
.toggleClass(`.fa-check .fa-cross')
add one as the default.
Toggle text can be handled by either not using .toggle (using .show/.hide) instead or by including a span for each text and toggling those. Or by having 2 buttons and toggling those.
Example snippet (needs fa icons)
$(".toggle").click(function() {
$(this).toggleClass("collapsed expanded")
$(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
});
.wrapper { border: 1px solid #CCC; width: 200px; }
.wrapper .details { border-top: 1px solid #CCC; }
.wrapper .toggle.collapsed > div.details { display:none; }
.wrapper .toggle.expanded > .more { display:none; }
.wrapper .toggle.collapsed > .less { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='toggle collapsed'><i class='fa fa-chevron-up'></i>
<div class='more'>more</div><div class='less'>less</div>
<div class='details'>details</div>
</div>
</div>
You can apply the same logic for the text to the icon as well if preferred (include 2 <i class='fa...) and then use css to show/hide them based on the class on the parent.
You can also add some css transition so it's less jumpy, or you can use $(this).find(".more,.less").slideToggle() instead of just toggle to add an effect.

There are dozens of ways to do it. Below is a step-by-step tutorial.
This should work, assuming you have already included jQuery.
<img id="imgtog" onclick="toggle()" src="someimg1.png">
<div id="content" hidden="">content</div>
<script>
var tog = false;
function toggle()
{
if(tog == false)
{
$('#content').removeAttr('hidden');
$('#imgtog').attr('src', 'otherimage2.png');
tog = true;
}
else
{
$('#content').attr('hidden', '');
$('#imgtog').attr('src', 'someimg1.png');
tog = false;
}
}
</script>

Smooth background images transition - Javascript

http://www.chooseyourtelescope.com/ (>> Please watch it on a minimum 15'' screen, the site is not entirely responsive yet and you wont see what I'm talking about)
When you hover the buttons (moon, planet, etc...) it changes the background. But the transition is buggy on Chrome (image0>blank>image1). And worknig on IE11 but sometimes with a lag. I didn t try with the other browsers.
How to make a smooth transition?
A quick fade Image0>image1, not image0>transition color>image1
Here is the code for the MOON button. Thats the same with the others.
(I don't know anything about Javascript. I found the script below on Stackoverflow.)
HTML
<div class="top-logos-home" id="top-logos-moon-front"><img src="moon-logo.png" alt="MOON"></div>
CSS
.image-home {
position: absolute;
width: 100%;
height: 100%;
background-image: url(Frontpage.jpg);
background-size: cover;
display:inline;
top:0;
}
JAVASCRIPT
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")')
}, function() {
$body.css('background-image', '')
})
})

You need to change just your script code if you want smooth transtion.
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
$body.css('background-image', 'url("Frontpage-moon.jpg")').fadeIn('slow');
});
}, function() {
$body.css('background-image', '')
})
})
If you want to do best solution for this you need follow the steps below.
Firstly you need to defined your path of images in the js with the below code.
var imgs = [
'http://i.imgur.com/DwLjYhh.jpg',
'http://i.imgur.com/gAlqfUU.jpg'
];
After this step, you need to add new attiribute your buttons like data-id.
<div class="top-logos-home" id="top-logos-moon-front" data-id='0'>
<img src="button_image_jpg" alt="MOON">
</div>
When you defined all variables, you need to detect the hover with your current code and choose the right image that is in imgs array for your background.
jQuery(function(){
var $body = $('.image-home');
$('#top-logos-moon-front').hover(function(){
$body.fadeOut('slow',function(){
//fade out slowly element and after change the style of inner elements then fade in slowly.
$body.css('background-image','url('+imgs[$(this).attr('data-id')]+')').fadeIn('slow');
});
});
});
In my personal opinion; Image transitions shouldn't manage in this way. Create different element for each planets. When user click the button, planets slip and overlapping. You can see a demo in the below code.
http://codepen.io/thegeek/pen/GDwCa

I found a solution by using the opacity property. Now its working perfectly.
HTML
<img id="background-moon-front" class="hover-backgrounds" src="Frontpage-moon.jpg" />
CSS
.hover-backgrounds {
opacity:0;
transition: opacity 0.6s linear;
top:0;
position:absolute;
background-size: 100%;
}
JAVASCRIPT
$(document).ready(function (e) {
$("#top-logos-lune-front").hover(function (e) {
$("#background-moon-front").css("opacity", "1");
}, function() {
$("#background-moon-front").css("opacity", "0")
})
});

Rollover effect using JavaScript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
This may be an easy question and I am over thinking it. I have a situation where I want to implement a Rollover effect.
I have Img1 which is a button. When a user hovers on Img1 another img in the container (Img2) will change to (Img3). When the user is no longer hovering over Img1 then Img3 will change back to Img2.
I hope that makes sense.
EDIT:
Thank you all for the help, it has been a pleasure knowing that there are so many people willing to help. I ended up choosing the answer that was simplest for me to use, so I apologize to offend anyone.
Here is my final answer (with code):
<!--SECTION 3-->
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="s3">
<div class="container">
<img class="btn" id="btn" src="/common/<%=site_version%>/img/s3_order_btn.png" draggable="false" alt="">
<img class="bulb" id="bulb" src="/common/<%=site_version%>/img/s3_bulb_noglow.png" draggable="false" alt="">
</div>
</section>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--END OF SECTION 3-->
<script>
$("#btn").hover(function(){
// when mouseover
$("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_glow.png");
},
function() {
// when mouseout
$("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_noglow.png");
});
</script>

Use this:-
i am here supposing Img1 Id is Img1 etc.
$("#Img1").hover(function(){
// when mouseover
$("#Img2").attr("src","paste your Img3 Url");
},
function() {
// when mouseout
$("#Img2").attr("src","paste your Img2 Url");
});

Have you tried CSS :hover selector?
HTML:
<div class="container">
<div class="A">Hover me!</div>
<p>lorem ipsum...</p>
<div class="B">And I will highlight myself</div>
</div>
CSS:
div.container > div {
display: inline-block;
border: 1px solid #000;
padding: 16px;
margin: 16px;
cursor: pointer;
transition: background .4s;
background: #fff;
}
div.container > div:hover ~ div {
background: #ff0;
}
http://jsfiddle.net/1fwr9wfw/
In CSS, you can change the background-image too.

If using the jQuery .hover() method, just know that it accepts two arguments:
$("#Img1").hover(function(){
// mouse enter
$("#Img2").attr("src","paste your Img3 Url");
}, function(){
// mouse leave
$("#Img2").attr("src","paste your Img2 Url");
});
There are other optimizations that could be made as well, like storing the original Img2 src somewhere so you don't have to redefine a URL you already have, but that's another story.

I will assume your html looks so :
<img src="button.jpg" alt="button" id="mybutton" />
<img src="image1.jpg" alt="image 1" id="imagetochange" />
Use this javascript :
window.onload = function(){
var btn = document.getElementById('mybutton');
var img = document.getElementById('imagetochange');
btn.onmouseover = function(){
img.src = 'image2.jpg';
};
btn.onmouseout = function(){
img.src = 'image1.jpg';
};
};
demo

It sounds like something that could be done purely with HTML:
<div class="outerImage" style="width:64px; height:64px; background:blue url('outer_image.jpg');">
<img class="innerImageDefault" src="image2.jpg">
<img class="innerImageHover" src="image3.jpg">
</div>
and CSS:
/* Position both of the inner images. */
.outerImage > img {
float: right;
}
/* Hide the hidden image; hide the default image when hovered. */
.outerImage .innerImageHover,
.outerImage:hover .innerImageDefault {
display: none;
}
/* Show the hidden image when the outer image is hovered. */
.outerImage:hover .innerImageHover {
display: inline-block;
}
A rather dirty Proof of Concept on JSFiddle

JS script not working properly [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html

A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.

I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>

how do i make a calling bar in javascript? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i have a simple sms interface written in javascript and every time i click on a call button, a calling bar will(something like a progress bar that never stops or status bar). i still have no code for it because im still a beginner..please help
i have here a link http://jsfiddle.net/XBppR/22/
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
else{
// nothing, this else not required
}
}
this code is not working..don't mind this..for posting purposes only..

Warning: The following answer contains jQuery
So what you need to do is make two images, a foreground image to set the style:
(Can't see it very well, put it on a black background)
And a background image to create an animation effect:
Next, you must superimpose the FG on the BG.
HTML:
<div class="callbar">
<div class="callbarbg" style="width: 200px;"></div>
<div class="callbarfg"></div> <!-- later elements have higher z-index -->
</div>
CSS:
.callbarbg {
height: 20px;
background-repeat: repeat-x;
background-image: url("http://s9.postimage.org/4oij09p7j/sliding_Progress_Bar_BG.png");
background-position:right top;
}
.callbarfg {
position:relative;
top:-20px;
width: 200px;
height: 20px;
background-image: url("http://s9.postimage.org/bg8y34e73/sliding_Progress_Bar_FG.png");
}
.callbar {
overflow:hidden;
width:200px;
height:20px;
}
Finally, you must move the background image in order to make the fade in/out animation in each dot:
JS:
window.setInterval(function(){
var obj = $("parent of .callbar").find(".callbarbg");
if(!obj.data("width"))
obj.data("width", 200);
var w = obj.data("width") + 3;
obj.data("width", w).css("width", w);
var h = w%200;
if(h == 0 || h == 1 || h == 2){
obj.data("width", 200);
}
}, 33);
working jQuery jsFiddle with crude API: http://jsfiddle.net/pitaj/K25U8/6/
EDIT:
jQuery-free jsfiddle now up!
working jQuery-free jsFiddle with crude API: http://jsfiddle.net/pitaj/GpGE2/