I am learning the basics of Jquery's fadeIn and fadeOut function.
I thought It was going to be a success however it doesnt work. The console says I haven't defined $. How do I define this? Any clues at all?
My JSFiddle is here
HTML:
<div id="example"></div>
<div id="box"></div>
CSS:
.#example{
top:0px;
left:0px;
width:50%;
height:500px;
background-color:black;
display:none;
}
#box{
margin:auto;
width:50px;
height:50px;
background-color:black;
}
Jquery:
$("#box").click(function(){
$("#example").fadeIn("normal");
});
$("#box").click(function(){
$("#example").fadeOut("slow");
});
$ in your code means you are using a jquery function.
“$ not defined” usually means jquery is not loaded, please make sure you load jquery
You have one dot (.) before #example in CSS - just delete it.
Do not put two event handler listening for the same event on one DOM-element, because you will never know which one is called first.
Better do something like this:
var active = false;
$("#box").click(function () {
if (active) {
$("#example").fadeOut("slow");
active = false;
} else {
$("#example").fadeIn("normal");
active = true;
}
});
Try it out:
http://jsfiddle.net/57wyxe02/9/
Hope that helps!
Is this what you want? (you have some errors in you JSFiddle and you must call for jQuery on the left menu (Frameworks))
CSS
#example{
top:0px;
left:0px;
width:50%;
height:500px;
background-color:black;
display:none;
}
#box{
margin:auto;
width:50px;
height:50px;
background-color:black;
}
jQuery
$("#box").click(function(){
$("#example").fadeToggle("slow");
});
DEMO HERE
Related
Okay, I'm trying to apply a CSS Style to an <img> tag that does not have any class or id assigned to it. Here is my code:
===CSS===
.tgll-navi { //begin custom class for navi bar
.navi-left { //.navi-left
float:right;
text-align:center;
} // end .navi-left
img { // img
max-height:269px !important;
max-width:524px !important;
height:75%;
width:75%;
padding:7px;
background-color:white;
border-style:solid;
border-color:black;
border-width:4px;
} // end img
.scale { // scale
max-width:174px !important;
max-height:89px !important;
height:25%;
width:25%;
padding:3px;
background-color:grey;
border-style:solid;
border-color:black;
border-width:2px;
}// end scale;
}// end tgll-navi class
=== jQuery Code ===
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 5) {
$('img[src="http://gourmetlunchladies.com/new/wp-content/uploads/2016/02/image3355.png"]').addClass(".scale");
} else {
$('img[src="http://gourmetlunchladies.com/new/wp-content/uploads/2016/02/image3355.png"]').removeClass(".scale");
}
});
I am not getting any errors in the JavaScript console.log
if I add alert ('Message'); after the .addClass I get the alert popup.
I removed alert to see if the class was applied but the class does not get applied.
Working inside WordPress with DMS2 everything is updated to the latest version
Know me I probably forgot a period or semi-colon
Brent Higgs
Remove the "." from your addClass functions, you don't need it ;
...addClass(".scale")
becomes
...addClass("scale")
You are adding .scale classname. You should add scale classname
$('img[src="whatever"]').addClass("scale");
$('img[src="whatever"]').removeClass("scale");
I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.
The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)
This is my current JavaScript logic:
$('#container img').mouseover(function(){
$(this).siblings('.discr').show();
$(this).mouseout(function(){
$(this).siblings('.discr').hide();
})
})
For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.
You can try something like this:
JavaScript version
$('#container').mouseover(function () {
var $controls = $(this).find('.discr');
$controls.show();
$(this).mouseout(function () {
$controls.hide();
})
})
Example http://jsfiddle.net/b6hjm3t1/
Pure CSS version without JavaScript
You can have the same results just with CSS without the using JavaScript just by adding to the CSS:
#container:hover .discr {
display:block;
}
Example: http://jsfiddle.net/t6hf0fqg/
I think that this does what you're looking for. I've modified the code a little bit:
http://jsfiddle.net/jfkk78cn/1/
$( "#container" )
.mouseover(function() {
$(this).find('.discr').show();
})
.mouseout(function() {
$(this).find('.discr').hide();
});
Here is a CSS only solution for the same effect.
The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.
img {
width:200px;
height:200px;
display:block;
}
#container {
float:left;
position:relative;
border:2px solid green;
}
.discr {
position:absolute;
color:red;
background:rgba(0, 0, 0, 0.2);
bottom:0px;
width:100%;
text-align:center;
display:none;
}
/*ADDED THIS RULE*/
#container:hover .discr{
display:block;
}
.next {
left:185px;
}
.next, .prev {
bottom:50%;
width:15px;
border-radius:9px;
}
<div id='container'>
<img src='http://goo.gl/Rwf5SG' />
<div class='discr prev'><</div>
<div class='discr next'>></div>
<div class='discr'>lorem ipsum</div>
</div>
Lets say i have two divs in my code:
div1 - position(100,100)
div2 - position(100,200)
I am doing a javascript animation and I am wondering if there is any way to give them the same target position on the screen without giving them two different positions?
Ask if you want more information! Thanks
Not quiet sure if I understand your question.
Something like this? http://plnkr.co/edit/WKXV5amtwrQLefidmuAk?p=preview
$(document).ready(function () {
$('.movediv').animate({
top:'400',
left:'400'
},5000,function(){
});
});
the CSS:
div1{
width:100px;
height:100px;
background-color:red;
position: absolute;
top:100px;
left:100px;
}
.div2{
width:100px;
height:100px;
background-color:blue;
position: absolute;
top:100px;
left:200px;
}
and the HTML:
<body>
<div class="movediv div1"></div>
<div class="movediv div2"></div>
</body>
Is it possible to set body background image as a link? So when somebody click on anywhere outside the content area, it will go to another website.
Something like this http://jsfiddle.net/xzuEA/2/ , you just need to add background block with onclick event
<div id="fakebody">
</div>
html, body {
width:100%;
height:100%;
}
div#fakebody {
width:100%;
height:100%;
background:red;
}
$(function() {
$("#fakebody").click(function() {
window.location = "http://www.google.com/";
});
});
Can be done in html/css only:
<body>
<!-- YOUR WEBSITES HTML -->
</body>
CSS:
#background {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:0; // NOTE: YOUR OTHER ELEMENTS MUST BE ABOVE z-index: 0 TO MAKE IT A BACKGROUND
background:url(your/path/to/background-image.png);
}
I'm feel very irritated with div alignment problems on window resize. I would like to wrap elements inside div so that they won't come out of their exact positions after window resize.Is there a way possible to wrap elements inside parent <div> using Javascript. Also suggest any best ways possible to overcome this using javascript like handling resize() & zoom() events. If not suggest solutions possible by using Jquery.
HTML:
<div id ="top-left"></div>
<div id ="top-right"></div>
<div id ="bottom-left"></div>
<div id ="bottom-right"></div>
css:
div{
width:50px;
height:50px;
background-color:red;
position:absolute;
}
#top-left{
top:0;
left:0;
}
#top-right{
top:0;
right:0;
}
#bottom-left{
bottom:0;
left:0;
}
#bottom-right{
bottom:0;
right:0;
}
div#container{
position:relative;
border: 2px solid blue;
width:300px;
height:300px;
background:green;
}
jQuery:
$(document).ready( function(){
$('body').append('<div id="container"></div>');
$('body div').not('#container').each(function() {
var html = $(this);
$('#container').append(html);
});
});
Demo:
http://jsfiddle.net/x8Wnw/