Issue with hidden div with responsive slider in a wordpress website - javascript

So basicly I want to have 2 buttons (one for map and one for recent posts). I implemented it by making jQuery script for the hiding/showing the divs as it follows:
<div id="main-choice" style="height:100%; width:100%;">
<button class="buttons" id="button-region">News by regions</button>
<button class="buttons" id="button-latest-news">Latest news</button>
</div>
<div class="hide" id="world-map-chosen" style="width:100%;"><button id="back-to-choice-1">Back</button>
<?php build_i_world_map(1); ?></div>
<div class="hide" id="latest-news-chosen" style="height:400px; width:100%;"><button id="back-to-choice-2">Back</button>
<?php echo get_new_royalslider(1); ?> </div>
<script>
$("#world-map-chosen").hide();
$("#latest-news-chosen").hide();
$('#button-region').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#world-map-chosen").fadeIn("slow");
});
});
$('#button-latest-news').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#latest-news-chosen").fadeIn("slow", function(){
fireOnResizeEvent();
});
});
});
$('#back-to-choice-1').click(function() {
$('#world-map-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
$('#back-to-choice-2').click(function() {
$('#latest-news-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
</script>
</div>
and in the head tag:
<script language="JavaScript" >
function fireOnResizeEvent() {
var width, height;
if (navigator.appName.indexOf("Microsoft") != -1) {
width = document.body.offsetWidth;
height = document.body.offsetHeight;
} else {
width = window.outerWidth;
height = window.outerHeight;
}
window.resizeTo(width - 1, height);
window.resizeTo(width + 1, height);
}
window.onresize = function() {
alert("Resized!");
}
</script>
My issue is that the slider and the map are taking the hidden state size and not refreshing when shown by the script.
As you can see i tried to include a function in the jQuery that resize the window after the load, but without luck.
Both the functions for loading the map and the slider are working correctly.
Could you please help me solve this one by helping me fix this code or give me some ideas how should i make it?

Related

jQuery window resize fires alert, doesn't fire function

I have the following pieces of code in my footer:
<script type="text/javascript">
jQuery(document).ready(function($){
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
<script type="text/javascript">
jQuery(window).resize(function($){
alert('I fire');
var maxHeight1 = 0; $(".header-primary").each(function(){ if ($(this).height() > maxHeight1) { maxHeight1 = $(this).height(); } }); $(".header-primary").height(maxHeight1);
var maxHeight2 = 0; $(".header-secondary").each(function(){ if ($(this).height() > maxHeight2) { maxHeight2 = $(this).height(); } }); $(".header-secondary").height(maxHeight2);
});
</script>
The first piece does its job properly. When I refresh/open the page, the elements that have the CSS classes mentioned inside this JS code, have the same size (of the biggest one).
When it comes to the window.resize part, it doesn't work at all. I've tried all kinds of wrappers to satisfy Firebug, but even when it doesn't display an error, the script still doesn't work. The alert included for testing purposes works, so window.resize fires properly.
I usually find solutions using the search engine, but this one is an exception. :(
HTML:
<div class="block">
<div class="block-big-item">
<h3 class="header-primary">BIG ITEM</h3>
</div>
<div class="block-small-items">
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
<div class="block-small-item">
<h3 class="header-secondary">SMALL ITEM</h3>
</div>
</div>
</div>

jQuery .wrap .unwrap responsive

Forgive me, I am fairly new to javascript. I am trying to remove a div's parent below 980px wide and then add it back in above 980px. I am using the following code that I have put together from looking at other jQuery.
jQuery(window).resize(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
} else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
});
I'm guessing you will realise I am experiencing a few issues!
The jQuery doesn't apply below 980px on page load, however when you start with a large screen size and shrink the width below 980px the jQuery works.
Once the jQuery has fired and the screen size goes above 980px, the div that has been removed does not get reapplied.
Please explain where I have gone wrong as I would like to learn.
Thanks for your time
UPDATE
The html before any jQuery is:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
With the following jQuery:
jQuery(window).load(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
}
else {
Tags.wrap( "<div></div>");
}
});
This now occurs above 980px on page load:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div>
<div class="span4"></div>
</div>
</div>
</section>
And when i refresh the page below 980px:
<section>
<div class="span4"></div>
</section>
The result below 980px is correct, however only runs when i refresh the screen. The result above 980px is not my intended result, i would like it to remain or return to:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
#1: Call the function once on page load, that way you don't need to resize to get it
#2:
else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
should be
else {
(Tags.wrap( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}

How to use ontouch event in canvas HTML5?

I am new to this site and this is first question I am asking here..if its simple pls forgive me..
I have drawn one background image, on this I am drawing 5 small small images by using drawImage() method. Once I touch the small images then they should disappear or should pop up one alert box but ontouch event is not occurring so far I have searched for ontouch event but no use. I dont want to draw images through img tag in HTML.
Here is my code segment
var car = new Image();
car.src = "img/car.jpg";
car.onload = function() {
imgLoaded = true;
}
if (imgLoaded = true) {
drawBackgroundImg();
drawCarImg();
}
function drawCarImg() {
if (i == 0) {
x1 = Math.floor((Math.random() * 501));
y1 = Math.floor((Math.random() * 301));
cxt.save();
cxt.drawImage(car, x1, y1, car.width, car.height);
cxt.restore();
}
}
car.on('touchstart', function() {
alert("T");
});
Here is my HTML code
<!DOCTYPE html>
<body>
<div id="container" onclick="void(0)">
<canvas id="can"> </canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
</body>
</html>
Could anybody help me to get the solution.
FYI: I am running this code in Phonegap NOT in browser.
$( '#id' ).on( 'touchstart',function(){
//your code
});
here id is id of your html element on which you want to listen touch event.
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
I have found the answer, I made div with invisible and placed the images with position absolute and use the id's of images and trigger the touchstart event.
above said example here
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});

How to dynamically call jquery function when browser width goes below 950px?

I am trying to resize a video so that if fills 100% of its container ONLY when the browser width drops below 960 pixels. For reasons pertaining to inline styles I wrote this simple function in jquery. If works fine--but it is only called when the window is loaded.
$(document).ready(function(){
if ($(window).width() < 950) {
$("video").width("100%");
}
});
How would I write a similar jquery function which can change the width of the video dynamically as the browser window is resized? I have tried the following but to no avail.
$(window).resize(function() {
if ( $(window).width() < 950) {
$("video").width("100%");
}
});
*EDIT*Here is the new video html code:
<div id="sliderbg">
<div class="container">
<div id="slider" class="row">
<div class="eight columns">
<div id="text-6" class="widget widget_text"> <div class="textwidget"><br>
<video id="wp_mep_1" width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none" >
<source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />
<object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />
</object>
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
m:1
,features: ['playpause','current','progress','volume','tracks']
});
});
</script>
<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
$("video").width("100%");
}
});
</script>
</div><!-- eight columns -->
By the way I am using the foundation css framework. I doubt that would be causing the problem.
You can also use CSS Media Queries:
#my-element {
width : 950px;
}
#media all and (max-width: 950px) {
#my-element {
width : 100%;
}
}
This sets the element to 950px wide unless the viewport is less than 950px in which case the element is set to 100% width.
Here is a demo using media queries: http://jsfiddle.net/G9gx6/
Here is a good source for finding what browsers support what: http://caniuse.com/#feat=css-mediaqueries
Update
Of-course you can use JavaScript as well:
//bind to the windows resize event
$(window).on('resize', function () {
//check if the viewport width is less than 950px
if ($(this).width() < 950) {
//if so then set some element's width to 100%
$('#my-element').width('100%');
} else {
//otherwise set the element's width to 950px
$('#my-element').width('950px');
}
//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');
Update
To optimize this code I would cache the $('#my-element') selection as well as throttle the resize event handler to only run once-in-a-while:
$(function () {
var $element = $('#my-element'),
resizeOK = true,
timer = setInterval(function () {
resizeOK = true;
}, 100);
$(window).on('resize', function () {
if (resizeOK) {
resizeOK = false;
if ($(this).width() < 950) {
$element.width('100%');
} else {
$element.width('950px');
}
}
}).trigger('resize');
});
Here is a demo: http://jsfiddle.net/G9gx6/1/
You just have a typo. It should be:
$(window).resize(function() {
resize() documentation: http://api.jquery.com/resize/
What you want to do is wrap your function in:
$(window).resize(function(){
alert('You resized the window!');
});
Reference: .resize()

Using JQuery how to show and hide different div's onClick event

I would like to show a div based on the Onclick event of an link.
First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..
Code Follows:
<div class="toggle_button">
Toggle
</div>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<div id='div2' style="display:none;">
<!-- content -->
</div>
<div id='div3' style="display:none;">
<!-- content -->
</div>
Jquery Code :
$(document).ready(function() {
$("#toggle_value").click(function(){
$("#div1").show("fast");
$("#div2").show("fast");
$("#div3").show("fast");
});
});
The above code shows all divs on first click itself but it should show div1 on first click as mentioned.
I'll try my shot.
EDIT:
After second though, to avoid global variable use it's better to do the following
$(document).ready(function() {
$("#toggle_value").click((function(){
var counter = 0;
return function()
{
$("#div" + counter).hide("fast");
counter = (counter % 3) + 1;
$("#div" + counter).show("fast");
}
})());
});
You should add a counter in the function.
$(document).ready(function() {
var count = 0;
$("#toggle_value").click(function(){
if (count == 0) {
$("#div1").show("fast");
$('#div2').hide();
count++;
}
else if (count == 1) {
$("#div2").show("fast");
...
count++;
}
else if (count == 2) {
$("#div3").show("fast");
....
count++;
}
else {
$('div').hide();
count=0;
}
});
});
How about this
Working Example here - add /edit to URL to edit the code
$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'
$(function() {
var counter = 1;
$('#toggle_value').click(function() {
$('div','#container')
// to stop current animations - clicking really fast could originally
// cause more than one div to show
.stop()
// hide all divs in the container
.hide()
// filter to only the div in question
.filter( function() { return this.id.match('div' + counter); })
// show the div
.show('fast');
// increment counter or reset to 1 if counter equals 3
counter == 3? counter = 1 : counter++;
// prevent default anchor click event
return false;
});
});
and HTML
<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<div class="toggle_button">
Toggle
</div>
<br/>
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div>
</body>
</html>
This could easily be wrapped up in a plugin
A simple way would be to introduce a variable that tracked clicks, so something like this:
var tracker = 0;
$(document).ready(function() {
$("#toggle_value").click(function(){
if(tracker == 0)
{
$("#div1").show("fast");
}else if(tracker ==1)
etc etc
tracker ++;
});
});
My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.
$(document).ready(function() {
$("#toggle_value").click(function(){
if ($("#div1).is(':visible')) { // Second click
// Hide all divs and show d2
$("#div1").hide();
$("#div2").show("fast");
$("#div3").hide();
$("#div4").hide();
} else if ($("#div2").is(':visible')) { // Third click
// follow above example for hiding all and showing div3
} else if ($("#div3").is(':visible')) { // Fouth click
// follow above example for hiding all and showing div1
} else { // first click
// All divs should be hidden first. Show div1 only.
$("#div1").show("fast");
}
});
});
Just to warn you - I have not tested this code :)
Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F
Hope it helps
I prefer to use "filter" method and make a little easier work with counter:
(function () {
var divCounter = 0, divs;
$(function () {
divs = $('#div1, #div2, #div3');
$('#toggle_value').click(function (e) {
divs.hide() // hide other divs
.filter(function (index) { return index == divCounter % 3; }) // select appropriate div
.show('fast'); // and show it
divCounter++;
});
});
})();
I would probably do something like: (The following assumes all your <div>s are in a container with id "container")
$(document).ready(function() {
var $allDivs = $("#container > div");
var counter = 0;
$("#container > div").click(function(){
counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
$allDivs.not(":eq("+counter +")").hide("fast");
$allDivs.eq(counter).show("fast");
});
});
The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.
$("#toggle_value").click(function()
{
$("#div" + (++c) % 3).show().siblings().hide();
}
var c = 1;
$("#toggle_value").click(function()
{
$("#div" + c).hide("fast");
$("#div" + ++c).show("fast");
if (c > 3) c=1;
});
First You have to add query basic file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then you have to add the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function(){
$(".slider_area").hide(1000);
$("#show").css("display","block");
$("#hide").css("display","none");
});
$("#show").click(function(){
$(".slider_area").show(1000);
$("#show").css("display","none");
$("#hide").css("display","block");
});
});
</script>
Add the code above into the header portion and the code below in the body portion.
<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />
The code is ready for the different image click for show and hide div.
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
if (temp1 == 0) {
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 1;
}
else{
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 0;
}
});
</script>

Categories

Resources