Using this code to toggle the width of <div class="artists"></div> will freeze the browser on an iPad. Is there a work around for this? I use the latest jQuery
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$("a:nth-child(4)").click(function () {
$(".artists").animate({width:'toggle'},0);
$('.blur').toggleClass('blurbody');
});
</script>
It works correctly on a normal computer browser, just not on an iPad (Chrome or Safari). You can view the site at saint57records.com and click on the artists icon on the left.
You can use the following jquery function after your selection:
$("#targetElement").toggle();
Since you wish to change between invisible and 100% width, this should work !
To toggle the width you should so something like this:
<script>
$("a:nth-child(4)").click(function () {
var targetWidth = (someBoolean) ? '100px' : '300px';
$(".artists").animate({width:targetWidth},0);
$('.blur').toggleClass('blurbody');
});
</script>
Related
I have this site that has a 100% width div approximately 700px from top of page. When user scrolls page down and reaches the menu, it changes to fixed and stays on top of page until user scrolls up back. I have implemented this code I found on http://jsbin.com/omanut/2 :
<script type="text/javascript">
var fixit = document.querySelector('.topmenu');
var origOffsetY = fixit.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onScroll);
</script>
"topmenu" is a unique class I used for the menu bar div element. "topfix" is a class defined inside some html < style > tag:
<style>
.topfix {
position: fixed;
top: 0;
}
</style>
As you can see, this code shall add "topfix" as class for the div in question. So my html should change from < div class="topmenu" > to < div class="topmenu topfix" >. IT WORKS BEAUTIFULLY GREAT on Chrome and Firefox BUT I cannot make it work on IE. I'm a noob with programming but I think there could be something missing for adding an event listener that would work on IE. I will appreciate the help.
--After some answers, I made some modifications to the script; it is cool on Chrome/FF but still does not work on IE, so here you have it:
<script type="text/javascript">
var fixit = document.getElementsByTagName('div')[3];
var origOffsetY = fixit.offsetTop;
function onTopScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onTopScroll);
document.attachEvent('onscroll', onTopScroll);
</script>
I'm not sure about attachEvent syntax. Any further help will be appreciated.
What is the version of your IE?. document.querySelector() is not supported in every IE. You can use getElementsByTagName and match for the particular class and then do your thing.
try attachEvent for IE not addEventListener
I need to use Javascript/jQuery to control the way my elements load, meaning if I am on iPhone or Android mobile and for iPad and tablets. I dun wanna use CSS media queries, I need it in Javascript or jQuery. Any hints or links to read would be nice, thanks
You could detect device width and change settings / elements from there ?
var viewSize = $(window).width();
/* if is below 481px then it might be a phone :) */
if (viewSize < 481) {
//something special
}
...
I used screen.width and it worked fine. Just make sure that your script is right before the end of the page to guarantee that all elements are loaded. Here is the code:
<script type="text/javascript">
$(document).ready(function() {
if ((screen.width>720)) {
document.getElementById("photos").style.marginLeft="110px";
document.getElementById("videos").style.marginRight="100px";
}
});
</script>
I am trying to set the height and width of the jwplayer using jquery. Its working fine in all the desktop systems. but in Ipad, its not working properly. It showing the vertical scroll bar. I using the following calculation.
jwpwt = ((document.documentElement.clientWidth/100)*70);
jwpht = ((document.documentElement.clientHeight/100)*65);
jwplayer('container_video').setup({
flashplayer: '/media/js/player.swf',
file:$("#"+temp).val(),
height: jwpht,
width: popwt,
stretching :'exactfit',
skin:'/media/images/modieus/modieus/modieus.xml',
autostart: true
});
I dont know, which percentage have to give for ipad window. Anyone can help? Please!
JWPlayer is loading different elements on mobile device and desktop (you can inspect element on your ipad version using safari develop mode).
I was trying to resize the player dynamically using width:100% height:100% and stretch:uniform. It worked on desktop but not iPad either.
I guess for your case, you can try to put jwplayer inside a container. You set width and height of container. and for jwplayer, using my method, set width:100%, height:100%
Not sure if it helps.. Correct me if I'm wrong.
<script type="text/javascript">
jwplayer("myElement").setup({
......
width: '100%',
.....
});
</script>
I set the javascript window.onresize event to run other functions that fit div's size with the body's size. The problem is that when the screen is resized by adding a comment (using disqus), the divs whose sizes are supposed to fit with the new body's size, don't fit. I mean onresize function isn't being ran.
As you can see, the right side div doesn't grow as comments are being added (see the border). Do you have any idea about how make onresize event work?
PS: When I open developer tools on firefox, the div is resized, I don't know why, but the onresize event is ran. Only in this situation.
Edit: Tried to run this jquery script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).resize(function(){
tamanho_barra();
});
</script>
But, isn't working yet. I've tried to change the "document" to a random div and see if something would happen, but nothing. I have no idea about what is the problem. Could you help me please?
Edit2: Working now with rcabral's help. He told me to add a background image to the content which is a black point of 1px and repeat it until the bottom of the page.
#content { background:url('<?php bloginfo('template_directory'); ?>/images/gray_dot.gif') 634px 0px repeat-y; }
Your script isn't run automatically. You must include it inside a function that is run when the DOM is ready: $(document).ready(function() { here }); or $(function() { here });
For example:
<script>
$(function() {
$(window).resize(function(){
$("#barra").tamanho_barra();
});
});
</script>
And your code has a few errors:
1. You are using two opening parentheses after "resize" instead of just one.
2. And you should select window instead of document for the resize function.
I hope that helps.
There's a jQuery plugin that will let you target the container element that Disqus is running in.
Here's a demo: http://jsfiddle.net/hansvedo/S3R7w/
Here's the plugin: http://benalman.com/projects/jquery-resize-plugin/
And here's the syntax:
$('div#disqus-container').bind('resize', function(){
// your code
});
I have applied this javascript in my website to hide a certain element when the browser width decreases in size.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).bind("resize", function() {
$('#slideshow').toggle($(this).width() >= 960);
}).trigger("resize");
});
</script>
But in mobile browsers it displays the element quickly before removing it. Does anyone have any idea how to solve this?
Your code doesn't run until the document is ready; meaning you'll see the element briefly until the document.ready method is fired in jQuery. You could take the code to hide the element and place it directly after the element, removing it from the document.ready wrapper.
<div id="slideshow"></div>
<script>
$('#slideshow').toggle( $(window).width() >= 960 );
</script>
Alternatively, you could hide the element by default, and show it with JavaScript when the appropriate conditions are met.
<style>#slideshow { display: none }</style>
<div id="slideshow"></div>
<script>
$('#slideshow').toggle( $(window).width() <= 960 );
</script>
Have you tried twitter bootstrap solution for this?
http://twitter.github.com/bootstrap/scaffolding.html