<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function changecontent()
{
if (document.getElementById("slider").value<33)
{
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value>33 && document.getElementById("slider").value<66)
{
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value>66)
{
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
};
};
</script>
<style type="text/css">
.hide {display:none;}
.show {display:inherit;}
</style>
<input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
<div id="content">
<div id="1" class="show" style="position:absolute;z-index:0;">A</div>
<div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
<div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>
As the code above stands, this will create an HTML5 range slider that fades between 3 different div's depending on the position of the slider's knob. My problem is that the slider looks horrible in IE. I need to customize it's appearance to look uniform across browsers.
I've tried using jQuery Mobile, which resolves this issue. However it causes a conflict with the js used in WordPress's twentytwelve theme. I've tried resolving those conflicts to no avail. I've loaded in jQuery UI and no conflicts occur.
<div id="slider"></div>
The above code creates the UI slider, but I've been reading the jQuery API documentation and am not understanding how to alter my script to get the displayed content to change. Your expertise is greatly appreciated!
Try this:
HTML:
<div id="slider"></div>
<div id="content">
<div id="1" class="show" style="position:absolute;z-index:0;">A</div>
<div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
<div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>
JS:
$(function() {
$("#slider").slider({
slide: function(event, ui) {
if (ui.value < 33) {
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
}
else if (ui.value < 66) {
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
}
else {
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
}
}
});
});
CSS:
.hide {display:none;}
.show {display:inherit;}
Fiddle: http://jsfiddle.net/NxGZa/
Related
Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>
<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#slider").slider({
slide: function(event, ui) {
if (ui.value < 33) {
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
}
else if (ui.value < 66) {
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
}
else {
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
}
}
});
});
</script>
<div id="slider"></div>
<div id="content" >
<div id="1" style="position:absolute;z-index:0;">A</div>
<div id="2" style="position:absolute;z-index:1;display:none;">B</div>
<div id="3" style="position:absolute;z-index:2;display:none;">C</div>
</div>
The code above uses jQuery UI to create a slider. The slider fades between content in 3 different div's. The code is great on a computer, but the slider it creates does not slide on a mobile phone. What DOES work fine on mobile is as follows:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function changecontent()
{
if (document.getElementById("slider").value<33){
$("#1").fadeIn("slow");
$("#2").fadeOut("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value<66){
$("#1").fadeOut("slow");
$("#2").fadeIn("slow");
$("#3").fadeOut("slow");
} else if (document.getElementById("slider").value>66){
$("#1").fadeOut("slow");
$("#2").fadeOut("slow");
$("#3").fadeIn("slow");
}
};
</script>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/>
<div id="content">
<div id="1" class="show" style="position:absolute;z-index:0;">A</div>
<div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
<div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>
The code above 'works' on all browsers (mobile or not), but allows for no styling options and looks different on each browser. I'm fine with how it shows on mobile, but hate how it looks on IE and hate how it functions on Firefox.
Any JS/jQuery masters skillful enough to combine these so that the website will do one or the other based on screen resolution / device it's viewed on? I'm open to other options too. But I can't use jQuery Mobile due to JS conflict with the template I'm using. jQuery UI works fine.
Including http://touchpunch.furf.com/ after jqueryui should fix your issue. It modifies jqueryui to support touch events. By default, jqueryui only supports mouse events.
Here's a little tweak that might work for you:
http://www.fourfront.us/blog/jquery-window-width-and-media-queries
If a certain CSS property of #slider changes, because the user views it on a mobile device, you can catch that and apply a different JavaScript section to your slider.
It seems to be more secure than catching the window / device with via JS.
I've been looking around and I think I'm fairly close to getting this but when I move my slider to alter the speed of the animation, nothing seems to happen. I'm assuming this has something to do with the animation already in progress? Here's the code I have thus far:
<html>
<head>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
function pageScroll(speed)
{
$("html, body").animate({ scrollTop: $(document).height() }, speed);
}
</script>
</head>
<body>
<body onLoad="pageScroll(100000);">
<input onChange="pageScroll(this.value);" type="range" value="100000" name="slider" min="0" max="200000" style="position:fixed; left:0;top:0">
<center><img src="page-0.jpg" width="800">
<img src="page-1.jpg" width="800">
<img src="page-2.jpg" width="800">
<img src="page-3.jpg" width="800"></center>
</body>
</html>
Please delete these Part of your code <body onLoad="pageScroll(100000);">
And you have 2 body tags in your code... It's not good...
If you want to do something, when your page is loaded, then do it in JS with helps of jQuery ->
$(function() {
/* things to do, after the page is loaded */
pageScroll(100000);
});
To change the animation, use .stop(). It breaks all animations in queues. For more information, read API docs
function pageScroll(speed) {
$("html,body").stop().animate({ scrollTop: 119}, 500 );
}
And i'm not sure, but i think i had some Problem with this selector... if it doesn't work, try this selector:
$("html:not(:animated),body:not(:animated)")
You could do something like this:
http://jsfiddle.net/ASMITH/AECva/
<input id="slider" type="range" value="10000" name="slider" min="100" max="20000" style="position:fixed; left:0;top:0"></input>
$(document).ready(function () {
var vHeight = $('body').height();
$('#slider').change(function () {
var speed = $('#slider').val();
$('body').stop().animate({
scrollTop: vHeight
}, +speed);
});
});
I'm having some slight problems with fading one div into another, here's my code (and test page):
HTML:
<div id="grid">
<div class="grid-box">
<div class="phase-1">
<img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
<div class="grid-heading">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4>Probeything 2000</h4>
<p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
</div>
<div class="grid-heading-hover">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".phase-2").hide();
});
$(function(){
$('.grid-box').hover(
function(){
$('.grid-box .phase-1').fadeOut(200, function(){
$('.grid-box .phase-2').fadeIn(200);
});
},
function(){
$('.grid-box .phase-2').fadeOut(200, function(){
$('.grid-box .phase-1').fadeIn(200);
});
}
);
});
</script>
CSS:
.phase-1 .grid-image {
width:210px;
height:220px;
overflow:hidden;
}
.phase-2 {
position:relative;
top:-220px;
}
UPDATE:
I have one "working" (see test link in question). Is it possible to stop it fading to white then fading in the next phase? I want to fade the two div into each other rather than to white first.
If you type $ on the console, it answer undefined, so it probably was redefined by some other script. To use $ meaning jQuery again, use the following syntax
$(document).ready(function($) {
// $ means jQuery again in here
});
Notice the $ as the first argument of the function call.
Documentation here.