I have a sequence of position absolute div, say
<div>...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
I wrote a simple slide code using jQuery
currentDiv.fadeOut('slow');
nextDiv.fadeIn('slow');
It works perfectly in FF/Chrome/Safari/IE7/IE8, but not in IE6. I found in IE6, fadeOut and fadeIn not occur simultaneously as in other browsers, fadeIn always begin after fadeOut is completed. any ideas?
I just tried this example and both a fadeIn and fadeOut work at the same time in IE6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div#one").fadeOut("slow");
$("div#two").fadeIn("slow");
});
});
</script>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; display:block;}
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
I modified the example from: http://docs.jquery.com/Effects/animate#paramsoptions
I've noticed before that setting the styles display to none in the actual div instead of in the css file or via jquery can sometimes cause issues. Try just giving each div a class of displaynone instead of setting their style tag. Hopefully this helps and good luck!
Have you checked this site:
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
?
Here is a goog Plugin for jQuery:
http://malsup.com/jquery/cycle/
Have you tried writing your own animation to achieve the fades, rather than using the defaults supplied. I don't know that it will be any better, but it might be worth a try.
http://docs.jquery.com/Effects/animate
Related
Basically, I want a div box to slide in on the page when it loads. I tested it on other websites, and html previews, all of which have worked so far.
It just seems to be that this specific website doesn't seem to like it, and I can't figure out why.
The HTML:
<div id="kitten">
<div class="banner">
bloop
</div>
</div>
The script:
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
</script>
The CSS:
#kitten{
position:absolute;
width:100%;
height:920px;
top:0px;
left:0px;
background:white;
}
.banner{
position:fixed;
width:600px;
height:45px;
left: 0;
right: 0;
margin: auto;
background:black;
color:white;
text-align:center;
z-index:500;
}
I'm jut curious if the website has some sort of way of blocking it, or if I happen to be using the wrong installation of jquery(?) Is there any way to find out what version of jquery to use that will work on there.
NO. I do not OWN the site, it's just a profile page that I posted some code onto. I'm not "hosting" anything.
First of all, you have to include jQuery library before that your js script
perhaps, "$" <- this object used by other libs, you have to check this link.
https://api.jquery.com/jquery.noconflict/
Add JQuery library before your script so that $ can be identified.
Eg:-
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
If you are using WordPress, Please convert $ to 'jquery`
$(document).ready(function() {
to
jQuery(document).ready(function($){
Try this, firstly load jquery before body closing tag</body>
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>
then, create in the same folder of your index.html a file called script.js that should look like this :
$( document ).ready(function() {
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
});
Now include it in your html just after jquery:
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html
If still not working try, as #Arshid KV said, to change
$(document).ready(function() {
to
jQuery(document).ready(function($){
I have a simple JQuery thing that activates when the page is ready. Two strings would slide down at different times.
The problem is that in the first string, only the first half of the word slides down but the second half is delayed for a split second.
Can someone tell me why?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
background-color:#007B4C;
width:1280px;
height:70px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}
.body{
width:1267px;
position:relative;
left:-12px;
height:1010px;
background-color:#EDF0F5;
top:25px;
z-index:9;
}
.footer{
background-color:#007B4C;
width:1267px;
position:relative;
left:-12px;
height:200px;
top:25px;
z-index:9;
}
.message{
font-family:"MS PGothic";
width:1200px;
font-size:40px;
text-align:center;
position:relative;
left:50px;
color:#333333;
top:200px;
display:none;
}
.congratulations{
position:relative;
font-family:"MS PGothic";
width:300px;
left:450px;
top:200px;
color:#333333;
font-size:60px;
display:none;
}
</style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
$(".congratulations").slideDown(400);
$(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>
It is because the h1 element containing your string "Congratulations!" is smaller than it's rendered text and jQuery apparently applies the animation on the h1 element at first, which crops just a fraction of the string.
Either remove width property of .congratulations class or make it wider than the text.
I suggest you to use "inspect elemnt" tool in your browser to debug strange things like this.
The reason for CONGRATULATIONS to cut out while sliding is because of the width given for .congratulations in CSS.
The first half that slides will be equal to the width that is set. Reducing would keep the first part smaller and increasing would keep it larger.
Keeping the width:100% is the solution to your problem.
hi the problem comes from css class .congratulations
increase to width:500px //this will fix the problem with half word slide
This is pretty wild, slideDown is sliding down only the portion you specified in the width, 300px. The rest is displayed after the slideDown finishes.
Remove width from congratulations CSS class.
I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.
I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.
In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).
Here is my HTML, I am just using the stock mootools downloaded from their website.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Further Description of Problem
Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.
Any ideas?
EDIT
Currently attempting this code, still nothing shows up.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
EDIT 2
Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.
It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.
"Wut." is my only response.
Edit 3
I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.
In summary: Today I learned that CSS can keep javascript events from firing.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
I think you have a syntax error in background: color
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});
The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit
For reference: http://mootools.net/docs/core/Utilities/DOMReady
When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:
JQuery:
$(document).ready(function(){ //Waits for page load
$("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
$($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
});
});
CSS:
a.spoilerButton,
a.spoilerButtonDark {
text-decoration:none;
color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
color:grey;
cursor: pointer;
}
a.spoiler {
display:none;
}
HTML:
<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->
<div class="contentBoxFooter">
Show/Hide <!--Button-->
</div>
What I would like:
Support for multiple buttons
A way to link the buttons to its appropriate spoiler at any place in the HTML
Problems I am facing:
Don't exactly know the proper way to link the button to its appropriate spoiler, or if I'm
doing it completely wrong
Current method uses href in anchor tag which shifts the page scroll location whenever clicked on
Main Question:
I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?
I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="a1" class="spoiler">Content</div>
<div id="a2" class="spoiler">Content</div>
<div id="a3" class="spoiler">Content</div>
<div id="a4" class="spoiler">Content</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$('#'+foo).slideToggle(1000);
});
});
</script>
</body>
</html>
I have a div with some text, I want to change its background color on "onmouseover" event, its working fine in Internet Explorer but not working at all in Firefox.
Please answer.
Every attempt would be respected.
Thanks in advance...
a Pure javascript solution for your problem tell if it works for you
<div onMouseOver="this.style.backgroundColor='#CCFF99';"
onMouseOut="this.style.backgroundColor='#FFFFFF';" ">
Hello Welcome Testing Bg color on MouseOver
</div>
Demo
jsfiddle.net/577nc/1
The following code works in firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#div_to_change_colour {
background: rgb(255, 0, 0);
}
</style>
<script type="text/javascript">
function changeColor(objectPassedIn){
objectPassedIn.style.background = '#CCC';
objectPassedIn.style.width = '200px';
}
</script>
<title></title>
</head>
<body>
<div id="div_to_change_colour" onmouseover="changeColor(this)">
text inside div
</div>
</body>
</html>
The problem you may have been facing is if you set the divs background color with 'background-color'. The above code uses 'background' to set the divs color and this can then be overided with javascript.
want to change its background color on
"onmouseover" event
also you can make it using the simple CSS without any javascript code:
.myDiv {
background:#ffffff;
}
.myDiv:hover {
background:#cccccc;
}