i have a phone number div.when it is clicked, it will trigger a call,so i want to display this div only on mobile devices.for that i have assigned display none to the div initially and i am trying to show the div on mobile devices using jQuery like below
$(document).ready(function () {
if($(window).width() <= 480) {
$('#phone-number').show();
}
});
But it doesn't work.i didn't know what is wrong with this ,please someone help me in this issue
Can you also put your code in $(window).resize handler like below:
$(window).resize(function() {
if($(window).width() <= 480){
$('#phone-number').show();
}
});
Also make sure that you are giving correct id #phone-number
Related
Ehy guys. I have a strange kind of problem. I've created a button to scroll the page to the bottom when the user clicks it, and it works only if I use scroll(0,0), while if I use scrollTo(0,0) (which should work in the same way I guess) doesn't work (the page doesn't scroll, nothing happens). Here is a part of code: this is the function which should scroll to the top after click using scrollTo but which doesn't do anything.
<button id="scrollaInAlto" onClick="scrollInAlto();"
style="background-color:Transparent;border:none;display:none;"></button>
<script>
function scrollInAlto() {
window.scrollTo(0,0); <-- this one doesn't work
//window.scroll(0,0); <-- this one works
}
</script>
The only other thing I have is a small script to show and hide the button which scrolls the page: here it is.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $temp = $("#scrollaInAlto").scrollTop();
if (document.body.scrollTop > 50) {
$("#scrollaInAlto").show();
} else {
$("#scrollaInAlto").hide();
}
});
});
</script>
Why doesn't scrollTo work properly?
I'm building a website and I'm using media queries to make the website responsive for mobile devices. On the desktop version of my website, I'm using the following Javascript to make 2 divs fade in/out once 100px have been scrolled down.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
} else {
$('#firstHeadingLeft, #firstHeadingRight').fadeOut();
}
});
Now the problem is, I don't want this javascript to be active on my mobile device, I want the 2 divs to be always present. I done some searching and found this
How to disable JavaScript in media query
One of the suggestions was to add an event listener using this code
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
...execute script
}
});
However because I'm not fluent in javascript I'm unsure how to correctly wrap my code into the event listener code.
If someone could give me a hand that would be appreciated! -- Thank you!
This should work but I have no way to test it. Tell me what happens :)
window.addEventListener('resize', function(){
disableScript();
});
window.addEventListener('load',function(){
disableScript();
});
function disableScript(){
if(screen.width > 568){
//...execute script
}
}
I'm designing a responsive website and am using media queries to handle the responsiveness. However along with the CSS I want to disable certain jQuery click functions at a certain window width.
Right now I can do this successfully on page load but I want to also be able to do it assuming the user resized the window.
(paragraph 3) So for example if the user starts off with a really big window on his/her computer and he/she resizes it to be a very small window he/she should not be able to activate the click functions anymore. Conversely if a user starts off with a very small window on his/her computer and resizes it to be very big he/she should be able to activate the click functions.
I have tried multiple solutions but none seem to work.
Basically I want to make some clickable objects not clickable anymore or at least have them click and do nothing at a certain window width.
Simply checking at page load and no other time makes it so that what should happen in paragraph 3 doesn't happen.
$(document).ready(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}})
$(document).ready(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}})
I tried remove the id attribute that I'm using to call the function on at certain window widths and readd them at the width but this doesn't seem to work either. Removing the id doesn't seem to disable to click function at all.
And my most recent solution which comes the closest is just to bind the click function to window resize. So far this works but it is extremely buggy so when you get to a width where the click function works and you try clicking it will do the toggle function about 100 times before it stops. But it does sustain the condition described in paragraph 3.
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}
else return})
$(window).resize(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}
else return})
Does anybody have an idea for a working solution that would work flawlessly like css media queries do? I don't think this is that complicated of a problem to work around so I'm hoping for some good answers! Thank you guys so much in advance!
Several problems here. First, resize fires almost constantly while the window is moving, so don't actually trigger anything on that. Second, you should only bind your event handlers once (or if you must bind more than once, make sure you clear out the old ones.) You can simplify thusly:
$(document).ready(function() {
var isLargeWindow;
$(window).on('resize', function() {
isLargeWindow = $(this).width() > 992;
});
$('#whatever').on('click', function(e) {
if (isLargeWindow)
// do large window stuff
else
// do small window stuff
});
});
My simplest way of doing that is not using the resize event at all just attach
the click event and add an early return term if the window size doesn't suite your needs.
Example code:
$('#portclick').click(function(){
winWidth = $(window).width();
/* You can add an height value too */
winHeight = $(window).height();
if ( winWidth < 992 ) return;
/* Youe Code Executes */
});
If you want the if statement to be called after the resize has happened then do something like this:
http://jsfiddle.net/sLk5ro6c/1/
$(window).resize(function (e) {
window.resizeEvt;
$(window).resize(function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
doneresizing();
}, 250);
});
});
function doneresizing() {
if ($(window).width() > 500) {
// DO SOMETHING HERE
alert('example');
}
}
This way the code won't be called every time during the resizing of the window
If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:
$('#mobileMenu').click(function(){
if ($('body').hasClass('mobile-nav-open')) {
$('body').removeClass('mobile-nav-open')
} else {
$('body').addClass('mobile-nav-open');
};
});
What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.
But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.
The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/
This looks to be what I'm trying to override:
Y.use(function (a) {
a.on("domready", function () {
if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
(a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
});
})
});
Instead of add/remove class on click try below approach to add/remove class on body tag.
function addBodyClass(){
if($(window).width() <= 640){
$('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
}
$(window).on('load resize', function(){addBodyClass()})
Fiddle Demo
Hello Stackoverflow bootstrappers!
I don't see that this question has been asked before, and I am really interested to see the outcome.
How to duplicate the bug:
Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
Resize the page down to a tablet
Use the navbar
(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.
NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.
Thank you, looking forward to your responses.
Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.
The only Javascript I have on my page is the following:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The code above closes the toggle after a selection is made in mobile.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
The code above (based on screensize) will offset the scrollspy
Edit #2
The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.
Help is much appreciated.
Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.
To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.
So the solution looks like this:
var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};