I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});
Related
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I have a cover-image like this
When the user hover on my image, I want to :
show an camera icon on the top left, and
hide it back when the mouse move away.
I have tried
CSS
<style type="text/css">
#cover-img:hover{
opacity: .9;
}
#nav-upload-icon{
top: 10px;
left: 10px;
color: red;
z-index: 1000;
}
</style>
HTML
<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>
JS
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass( "hidden" );
});
I couldn't get it to behave what I expected to see.
What is the best way to implement something like that ?
JSFiddle
There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover {
visibility: visible;
}
#nav-upload-icon {
visibility : hidden;
}
bind mouseout event to remove add the hidden class again
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
$("#nav-upload-icon").addClass("hidden");
});
Give position absolute to place it over the image
Fiddle
Go for #epascarello solution. It is the best.
The hover accepts two functions:
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
Fiddle
But obviously the CSS solution is better.
Your almost there. Add a second anonymous function to add the class for mouseleave
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
According to hover(), you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave
DEMO
If you don't want to use javascript, wrap a div around the image.
<div class="image-wrap">
<img > <-- your super cool large image
<img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>
Then in the css you go something like this
div.image-wrap:hover img.upload {
opacity:0.9
}
Don't bother with javascript, it's 2015
This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.
#cover-img:hover + img {
opacity: 1;
}
Updated Fiddle
I am trying to get a div background image to change when you roll over it as well as change text color. I got the color changing ok, but the bg image isn't. Here's what I got:
In the head:
#menu1 {
background-image: none;
}
<script language="javascript">
function txtroll(x)
{
x.style.color="white";
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png);
}
</script>
In the body:
<div id="menu1" onmouseover="txtroll(this)" onmouseout="txtout(this)">
I cannot seem to get the rollover to add the background image but it changes the font color just fine. Any ideas what I'm doing wrong? Thanks!
Try -
x.style.backgroundImage="url(images/moragames/logo/moragames_logo_01.png)";
instead of -
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png)
The style property of HTMLElement has no property called background-image.
u can do it with simple css too
demo
or with Javascript demo1
css:
#menu1 {
background-image: none;
height:100px;
}
#menu1:hover {
background-image: url('http://placekitten.com/200/100');
}
u can try this:
css:
.hover {
background-image: "url(images/moragames/logo/moragames_logo_01.png)";
}
js:
$('#menu1').on('mouseover', function(){
$(this).addClass('hover');
}).on('mouseout', function() {
$(this).removeClass('hover');
});
I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
http://www.bt.com/help/home/
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});
You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter mouseenter event will be fired only when you entering the element but not move within element.
This is the solution you want. It is almost similar to the site you provided.
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/
I got it, slight changes in selectors
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});
$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
LINK
<div id="DIV" style="display:none">Your content in it</div>
This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenter event, this class then makes the hidden <ul> in the div show up due to.
.shown ul{
display: block !important;
}
http://jsfiddle.net/28bb8/2/
EDIT:
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});
You don't need Javascript here. This is possible with CSS alone
HTML:
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddle for playing.
i hope this is the solution you're seaching for.
Just place the following code below your <body> tag:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>
I am trying to make a jquery text toggle. If you rollover the element, the text appears next to it and vice versa, it dissappears when you leave the element area.
My code does not work yet. Also, i would like to include different texts for different links. If there is a simpler way please suggest.
HTML
<div id="container"></div>
clickclickclick
JS
$("#ovr").mouseenter(function() {
$(#container).html("wazaap");
}).mouseleave(function() {
$(#container).html();
});
You are forgetting the quotes in the jQuery selector:
$("#ovr").mouseenter(function() {
$("#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
Edit
If you want different sentences, you can do this:
JS
var description=new Array();
description["one"]="Here comes the first";
description["two"]="And here the second";
description["three"]="Now let's have the third";
description["four"]="Finally the last one, fourth";
$("a.link").mouseenter(function(){
$("span#description").text(description[$(this).attr("id")]);
}).mouseleave(function(){
$("span#description").text("");
})
HTML
one
two
three
four
<span id="description"></span>
Check working here
http://jsfiddle.net/Wpe2B/
Try to do it with hover() function. Code will be cleaner.
Basic example:
jQuery:
$("#container").hover(
function() {
$('.cText').text("click");
},
function() {
$('.cText').text("");
});
CSS:
#container {
position: relative;
background-color: #EEEEEE;
width: 100px;
height: 100px;
position: relative;
display: block;
}
HTML:
div id="container"></div><span class="cText"></span>
Regards
Update
Base on OP's comments wanting to use several links to show text I tried this:
http://jsfiddle.net/cZCRh/4/
It doesn't quite work with a class because all links get the same text
This works http://jsfiddle.net/cZCRh/1/
<div id="container"></div>
clickclickclick
$("#ovr").mouseenter(function() {
$('#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
The problem was the mouseleave was in the wrong place as well as missing quotes around the element IDs