I am working on this website about a pub and I made the menu as a slider, but the problem is that when the window gets resized the iframes themselves don't. I don't know exactly how to explain it but you can take a look here:
http://raduadrian.com/square101/
Scroll down to the menu , and you'll see that it looks fine , if you resize the window it will mess up but , if you resize it and then refresh the page it will look okay on that width until you resize again.
Any ideas how this could be fixed?
If you need any of the code let me know but I basically used bx slider found here: http://bxslider.com/
You can use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
With multiple iframes you can use classes instead of id's.
Related
I'm creating my web-page by using fullpageJs https://alvarotrigo.com/fullPage/ plugin, and trying to make accordion FAQ page.
Basically the accordion refers to https://bootsnipp.com/snippets/QXdqR
The problem is when accordion exceeds the page height, the scrollbar doesn't work properly. (I'm activating "scrollOverflow" option)
Here is my current jQuery:
$(document).ready(function() {
$('.accordion').find('.accordion-toggle').click(function() {
$(this).next().slideToggle('600');
$(".accordion-content").not($(this).next()).slideUp('600');
});
$('.accordion-toggle').on('click', function() {
$.fn.fullpage.reBuild();
$(this).toggleClass('active').siblings().removeClass('active');
});
});
I just added $.fn.fullpage.reBuild();, trying to solve the problem.
However, I'm still stucking with three problems below;
It works only when the scrollbar is originally shown in the screen. (When "Q" content exceeds the height of screen)
Whole accordion move to unpredicted position after opening & closing answer.
(This happens when scrollbar originally isn’t displayed on the screen and then exceeds the height when the accordion opens. (This is hard to explain in words, and I hope the explanation makes sense…))
It seems adding $.fn.fullpage.reBuild(); makes the page slow to load. (especially on mobile). Is there any way to solve this?
By the way, I could get an ideal result when I resized browser each time after opening & closing answers.
...That’s it.
I would appreciate it very much if someone taught me any suggestions.
Try this:
$('#fullpage').fullpage({
scrollOverflow: true
});
I'm trying to recreate a menu that can resize the html page (not the browser window) to different sizes in order to "show" how the responsive code works. you can go to this page to see what i mean:
http://switcher.oklerthemes.com/?theme=Porto
I'm trying to recreate the upper menu, the one with the "device images" but i have no idea of how to do it and i can find any good information about this. does anyone have any idea?
One idea would be to wrap all of your code inside of a div with class .container, who's only job is to set the width. Then for each of the buttons, use javascript to resize the width of .container.
Here's an idea using jQuery:
$('#1').click(function(){
$('.container').css('width', '100%')
});
and a fiddle to demonstrate (notice I'm using jQuery for this): http://jsfiddle.net/md98h19c/1/
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I am trying to build an extremely simple responsive navigation menu. Am having some problems here.
When I resize the window equal to or lower than 768px in width, the responsive menu
will not work.
When I refresh the page at a lower window width equal to or less than
768px, the responsive navigation works... But, if I resize even by
one pixel, the responsive navigation display is hidden again.
I have created a CodePen here: http://codepen.io/anon/pen/fHsti
Thank you so much for your help!
Honestly the best way to approach this is to only use JS for managing the state of the nav between media queries, everything else should be tucked away in media queries. Something like MediaCheck or matchMedia is a great way to tie media queries and JS together.
I created a simple demo using your markup, and I think I got the functionality you were looking for. I used mediaCheck to clear away any JS-imposed inline styles between the main breakpoint of 768px.
Change this code. You need the if statement inside the event handler, otherwise it only binds the event if the width of the window is less than 768px on load.
jQuery("nav p.active").on("click", function(){
if (jQuery(window).width() <= 768) {
jQuery("nav ul").toggle("fast");
}
});
http://codepen.io/anon/pen/BHbon
I'm using jquery facebox dialogs, I'm trying to modify it to remain centered when I scroll, I'm not a programer although I know a bit of coding, I found this to open facebox on click coordinates
http://www.web-ramblings.co.uk/positioning-jquery-facebox-by-mouseclick/
I guess thats the same are to edit, what I'm trying to achieve is having facebox centered on the page even if I scrool down,
Can anyone help me?
thanks
It looks like you need to implement a window event for resize / scrolling. Instead of providing an answer to that can you not simply use fancyBox which already takes care of this for you?