I want to put this slider in the slideDown() function so that when the text is hovered the slider should come down.
I have given the code snippet that i was trying to work on, it includes the javascript, css, body.
<script>
var $ = function (id) {
return document.getElementById(id);
}
var swapImage = function (){
if($("image1").title=="image1")
{
$("image1").src="/static/img/new_desserts/two.jpg";
$("image1").title="image2";
}
else if($("image1").title=="image2")
{
$("image1").src="/static/img/new_desserts/teen.jpg";
$("image1").title="image3";
}
else if($("image1").title=="image3")
{
$("image1").src="/static/img/new_desserts/some.jpg";
$("image1").title="image4";
}
else if($("image1").title=="image4")
{
$("image1").src="/static/img/new_desserts/set.jpg";
$("image1").title="image5";
}
else if($("image1").title=="image5")
{
$("image1").src="/static/img/new_desserts/cake.jpg";
$("image1").title="image1";
}
setTimeout(swapImage, 5000);
}
window.onload = function () {
/* $("calculate=").onclick = function(){calculate();} */
swapImage();
}
$(document).ready(function(){
$("#prj_1").mouseover(function(){
$("#image").stop().slideDown("slow");
});
});
</script>
<style>
#prj_1{
position:absolute;
top:1%;
left:50%;
width:1230px;
height:200px;
font-family:Andalus;
font-size:20px;
color:gold;
}
#image{
position:absolute;
top:3%;
left:25%;
width:700px;
height:300px;
display:none;
background-color:red;
}
</style>
<body>
<div id="prj_1">AAA Laundry</div>
<div id="image">
<img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
</div>
</div>
</body>
if i remove the code for slideDown its working but otherwise it not.
please help.
I modified your code a little and used JQuery instead of Javascript,
also you used window.onload and $(document).ready which have almost the same purpose.
plz check this demo and see if that's what you wanted:-
http://jsfiddle.net/d3rtcyxn/
Related
I would like to know if there is a way to change a div's style when the style of another div changes.
Let's say for example that we have a div (test1), that changes its z-index after 5 sec. I would like to change the css of another div (test2) when test1 has z-index=2.
I don't think there are built in events for that, but you could use a setInterval like this:
var divStyle = null;
setInterval(function () {
var newDivStyle = $("#myDiv").attr("style");
if (newDivStyle !== divStyle) {
divStyle = newDivStyle;
$("#myDiv").trigger("divStyleChange");
}
}, 50);
$("#myDiv").bind("divStyleChange", function () {
$("#myDiv2").css("background-color", "#"+((1<<24)*Math.random()|0).toString(16));
});
function ChangeColorOfOuterDiv() {
$('#myDiv').css('background-color','#'+((1<<24)*Math.random()|0).toString(16));
}
#myDiv {
width:100px;
height:100px;
background-color:red;
}
#myDiv2 {
width:50px;
height:50px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<div id="myDiv2"></div>
</div>
<button onClick="ChangeColorOfOuterDiv()">Change color of outer div</button>
I have the following code which is supposed to show the content of a paragraph but it doesn't work:
jQuery
<script>
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$('.portfolio-text').addClass('portfolio-hover')
},
function () {
$('.portfolio-text').removeClass('portfolio-hover')
})
})
</script>
HTML
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
CSS
.portfolio-hover {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
which is not working and I don't know why. Can you help?
All you need to do is changing your CSS declaration.
p.portfolio-text{
display:none;
}
p.portfolio-excerpt{
display:block;
height:30px;
width:auto;
}
p.portfolio-hover{
display:block;
}
Here is working page --> JSFIDDLE
You forgot about adding p before .portfolio-hover and just put it on the end of the styles. Thats all.
A couple of related things - it's your css.
Firstly the order:
.portfolio-hover {
display:block;
}
/* this comes later in the css, it will override the hover */
p.portfolio-text {
display:none;
}
So fix it as such:
p.portfolio-text {
display:none;
}
.portfolio-hover {
display:block;
}
However p.portfolio-text is more specific than .portfolio-hover so will still be overridden - final fix is thus:
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
Include the p tag to up the specificity as .class is less specific than tag.class.
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
The other way is to remove the p from the others, if it's not needed.
In addition, you could update your CSS so it's a bit more specific (using multiple classes):
.portfolio-text.portfolio-hover {
display:block;
}
You could also "force" it by using important.
.portfolio-hover {
display:block !important;
}
If neither of those will work, reconsider your ordering (hey, some people hate important or .multi.classnames - I get that).
Finally, you can toggle the existing class using toggleClass.
$(this).next().toggleClass('portfolio-text');
Here's an example: http://jsfiddle.net/neknhp8p/
Try this:
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().addClass('portfolio-hover')
},
function () {
$(this).next().removeClass('portfolio-hover')
})
})
or just use .show() and .hide():
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().show();
},
function () {
$(this).next().hide();
})
})
Fiddle Demo
The problem is how CSS's styles are applied, in that the one class's definition isn't overriding the other. Change your styles like so:
.portfolio-hover {
display:block !important;
}
Alternatively, you can just be more specific with the selector's definition:
.portfolio-text.portfolio-hover {
display:block;
}
/** OR **/
p.portfolio-hover {
display:block;
}
Explanation:
Having an element where class="classA classB" where the css is:
.classA {
css-property: css-value1;
}
.classB {
css-property: css-value2;
}
Will result in classA's css-property taking precedence over classB's because of the ordering in the class property on the element. It's fixed by implementing the style in a way where one overrides the other. See here for more information on CSS precedence.
Please wrap the two paragraphs together with another div to unsure the disappear will be smooth.
toggle function changes display from none to block and from block to none to all p tags inside sss div.
HTML:
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<div class="sss">
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
</div>
JS:
<script>
$(document).ready(function () {
$('.sss').hover(function () {
$('.sss').children('p').toggle();
});
});
</script>
CSS:
<style>
.portfolio-hover, .portfolio-text {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
</style>
I'm trying to make a button show an alert box. Basically you write something in an input form, then you click one button to show an alert box with what you wrote in it. You can see it here in jsfiddle.
My code looks like this:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="myblock">
<div id="left"></div>
<div id="center">
<form>
<input type="text" name="a" value="Type your word here!">
</form>
<button><strong>Alert!</strong>
</button>
</div>
<div id="right"></div>
</div>
</body>
</html>
CSS:
.myblock {
margin-top:60px;
height:20%;
width:100%;
}
#left {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:green
}
#center {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:red
}
#right {
height:100px;
width:33%;
top:50%;
margin-top:-50px;
float:left;
position:relative;
background-color:blue
}
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
margin-left:50px;
}
button {
height:35px;
width:70px;
margin-top: 25px;
border-radius:5px;
}
JavaScript:
This is the part I think I am getting wrong
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
})
So why is it not working? I don't know what I am doing wrong.
You have't include Jquery library:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); //added
Updated DEMO: demo has included jquery library
Debugging JavaScript
I believe you should use Type your word here! as placeholder
<input type="text" name="a" value="" placeholder="Type your word here!">
Use JS fiddle reference
for your better understandings.
where I have given alert with the value present in the textbox.
and also I have used placeholder instead of typing string into textbox for default.
You might have been forgotten one of those.
Inlcude the jQuery library
close the $(document).ready() properly.
Check again.
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
});
DEMO
There are two things wrong here.
You have not loaded jQuery in your jsfiddle
You are missing a closing });
To load jquery in jsfiddle, there is a dropdown menu on the top left hand side of the screen that allows you to load libraries. Once you select jquery, you can click on Run button again.
But, you still need to fix your code ;)
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); // You missed this here
You missed closing simbols:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
**});**
Here is jsfiddle
You did not close your ready function, it should be:
$(document).ready(function () {
$("button").click(function () {
var word = $("input[name=a]").val();
alert(word);
});
}); // Add this line here
Besides in your jsfiddle include or enable JQuery because you are using one.
Why not use javascript?
Add onclick="functionName()" to the button and then
functionName() {
var word = document.getElementsByName('a').value;
alert(word);
};
I need to have three elements that alternate with a fade transition. I have it working for the most part, but for some reason when it returns to the first element it skips the fade and just appears. I'm sure there is something fairly obvious I'm missing here, but I just don't see it.
Any help would be greatly appreciated.
Thanks!
jsfiddle link:
http://jsfiddle.net/hcarleton/qLNyt/
HTML
<body>
<div id='one' class='selection'>
<h3>ONE</h3>
</div>
<div id='two' class='selection'>
<h3>TWO</h3>
</div>
<div id='three' class='selection'>
<h3>THREE</h3>
</div>
<div id='console'>
</div>
</body>
CSS
div {
width:100px;
height:75px;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
#one {
background-color:#aabbcc;
}
#two {
background-color:#bbccaa;
}
#three {
background-color:#ccaabb;
}
#console {
width:500px;
position:absolute;
top:200px;
left:25px;
background-color:#dddddd;
}
.top {
z-index:20;
}
p {
margin:5px;
}
javascript/jQuery
$(document).ready(function() {
var fade = 1000;
var wait = 1000;
var $selection = $('.selection');
var selectionQty = $selection.length;
var c = 0;
$('.selection').fadeOut(0);
$('.selection').first().fadeIn(0);
setInterval(
function() {
c+=1;
if(c == selectionQty) {
c = 0;
}
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
},
fade+wait
);
$('#console').append('<p>-'+selectionQty+'</p>');
});
You can't use setInterval() and maintain a synchronous chain of events. Use setTimeout() within the callback functions of your animations.
You have three animations triggering simultaneously.
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
Which one finishes first/last? Generally, you'll want to use setTimeout() when the last one finishes (there are exceptions).
My CSS:
#a_x200{
visibility: hidden;
width: 200px;
height: 200px;
background-color: black;
}
My JS:
<script type="text/javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
}
</script>
My Html
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>
Not working I think I missed something!
try this:
document.getElementById('a_x200').style.visibility = 'visible';
You can try this code:
HTML Code:
<div id="a_x200" style="display:none;">asd</div>
<input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
Java script:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = "block";
}
</script>
Try this code it will solve your problem.
You're using visibility: hidden to hide it, then attempting to use the display CSS property to make it visible. They're two completely separate properties, changing one won't magically change the other.
If you want to make it visible again, change the value of the visibility property to visible:
document.getElementById('a_x200').style.visibility = 'visible';
Here you can se one example i created in jquery Show/Hide using jquery .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
Show/hide
<div class="slidingDiv">
Fill this space with really interesting content. hide</div>
try this...
function showStuff(id) {
document.getElementById(id).style.display = 'block'; // OR
document.getElementById(id).style.visibility = 'visible';
}
edit
If you notice on your button click onclick="showStuff('a_x200');". you have already sent the id as a parameter to your function.. so i am taking the parameter and using it.
in your case have the parameter but not using it... though it does the samething...
OR u can do this
<input type="button" class="button_p_1" onclick="showStuff();"></input> // omitting double 'n'
function showStuff() {
document.getElementById('a_x200').style.display = 'block';
} // missing curly bracket
this both does the same thing
your input is miss spled
Should be like this:
My JS
<script type="text/javascript">
function showStuff(a_x200) {
document.getElementById(a_x200).style.display = 'block';
}
</script>
My Html
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>