We Keep Coding

Enable and disable script based on window width-resize

What I want to do is when the browser window width is below 1000px for example, to trigger the script owl carousel. But when the browser window width becomes larger than 1000px to disable owl carousel and the content to display again normally.
I managed to do this when the window is more than 1000px and resize it to be below 1000px but when I resize it again to be more than 1000px it does not disable the owl carousel.
My code
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() < 1000) {
$(".box").owlCarousel();
}
else {
//do nothing what to put here???
}
});
});
</script>
<div class="box">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
I tried also to use javascript to add a class if the window resizes to the .box div, but again the javascript when it resizes below and above 1000px it won't change dynamically as I want it.
Can you please tell me the best way to check live the browser width and enable/disable owl carousel?

I haven't used owlcarousel before, but quickly looking at the docs, I think you want to use the owl.destroy() method.
$(document).ready(function() {
$(".owl-carousel").owlCarousel()
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel')
$(window).resize(function() {
if ($(window).width() < 1000) {
owl.reinit()
} else {
owl.destroy()
}
});
});

Window.matchMedia() might be a solution for you. From the docs:
Returns a new MediaQueryList object representing the parsed results of the specified media query string.
Example:
if (window.matchMedia("(max-width: 1000px)").matches) {
$(".box").owlCarousel();
} else {
/* however you disable the carousel... */
}
Hope this helps!

Convert jQuery Mobile slider to jQuery UI slider and change content

<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/

jQuery Automatic page scroll with HTML slider to control animation speed

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);
});
});

multiple show hide toggle with div sliding out

I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>​
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/

For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});​
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});​
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});​

I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});​
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)

(IE6) insert content into iframe at current cursor position

I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.
One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.
Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>

Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":
<input type="button" value="OK" unselectable="on"
style="width: 80px" onclick="insertContent();">