How to Change div Position in responsive - javascript

This is my website which I am working on.
As you can see there is a sidebar in desktop mode. But when you see it in mobile mode the sidebar goes down under the content which is showing on the left side.
Now what I want in mobile view is to make sidebar appear on top, and after that the content should appear. I've tried lots of things like position:absolute; and margin but it's not working for me.
Please suggest what would be the correct way to do this task.
jsFiddle of my code
This works for me
<script type="text/javascript">
var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
$('.wf-span-4').insertBefore('.wf-span-8');
}
</script>

You should probably provide a simplified version of your code, however, here's what I've got.
You have one of two options:
change the structure of the site so that the order is reversed in
the first place.
Use jquery to move the content below a certain
width ex: $('#sidebar').insertBefore('#content')

The correct way imo would be to put your markup in the right order to begin with. Markup is structure and should be independent of styling (as much as possible).
Then your code would look something like this
<section class="main">
<div class="sidebar">Bye</div>
<main class='content'>Hi</main>
</section>
And all you would have to do is remove the floats on mobile, so the content goes back into the default flow. Something like this:
.content {
width:75%;
float:left;
}
.sidebar {
width:25%;
float:right
}
#media screen and (max-width:767px) {
.content, .sidebar {
float: none;
}
}
(note that I updated your class names and markup, just so the code would be a bit better readable)
And here is your updated demo: http://jsfiddle.net/ehozb5v9/2/

Related

scrollTop Broken: Body Height 100%, Overflow Auto

http://jsfiddle.net/o7z1pnfx/
I am working on a website with the following layout:
<html>
<head></head>
<body>
<div id="left"></div>
<div id="main"></div>
</body>
</html>
And the following CSS:
* {
box-sizing:border-box;
}
html,
body {
height:100%;
margin:0;
padding:0;
}
html {
overflow:hidden;
}
body {
overflow:auto;
}
#left,
#main {
min-height:100%;
float:left;
}
The rest of the CSS isn't really important, but rest assured that I have the floats cleared, etc. The layout looks exactly as I want it to.
The purpose of the provided CSS is to make it so that #left and #main will be at minimum the height of the window, but if either grows larger, the page will grow larger with it. This is working as intended.
The issue is that I need to use the Y scroll position in my JavaScript at some point, but the combination of height:100% and overflow:auto on body are causing body's scrollTop property to always be 0.
If anybody has a JavaScript alternative or a small CSS change to fix this, that would be great. I would prefer to avoid larger CSS changes, but they still may be helpful.
Thanks!
Tested on Firefox and it was not an issue. I believe it is a mistake with Chrome, and am reporting it as such. Don't know a workaround, doubt one exists.
Edit: sigh, also seems to be an issue in Safari.
Sorry for my late solution but I just encouter an issue just like you. The point is html tag doesnt like any overflow rule in it. Just remove any overflow from html and put in body and it work
Using just min-height won't break the scroll functions. (only tested in Chrome). 100vh seems to work fine too.
body, html {
min-height: 100%;
}
or
body, html {
min-height: 100vh;
}
Looks to me like you can get around this bug by using 100vh on the elements you want to always be the height of the window.
See the modified jsfiddle.
Viewport units arn't perfectly suported but it looks like this will work in most modern browsers.
Actually #scwcompton, your answer lead me on the right track for a fine workaround. What happens is actually that webkit browsers don't repaint the page for some reason.
Forcing the repaint fixed the issue for me. I added the following code right before I animate the body element :
MLB.BODY = $("#body");
MLB.BODY.css("display", "none");
MLB.BODY.height(); // no need to store this anywhere, the reference is enough
MLB.BODY.css("display", '');
MLB.BODY.scrollTop(99999);

How to remove clone() rule in Javascript when screen width is smaller than

I've been fiddling around with my navigation menu and decided to add a feature when you scroll down past a certain point the NAV slides down into viewport so that the user doesn't have to scroll back up to the top of the page to navigate. This is something that's become quite popular lately.
So I fiddled around and this javascript did the trick (note that I am not fluent with jquery at all):
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
Now I read that as ... duplicate or 'clone' (make another) .menu_wrapper element before the original + add the class .shrink to it ... AND only once we've scrolled past 700px, we'll see this duplicate NAV because of the class .slidedown
CSS:
.shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
.slidedown .shrink { top:0;}
Now this is working 100% and I'm stoked BUT (it's never smooth sailing is it!!!) now I've got a problem when I change my viewport to a screen width less than 767px - YES my website is responsive and this is where my NAV changes to the typical drop down (even without the javascript / effect above) by using css and javascript:
jQuery(document).ready(function($){
$('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#menu").slideToggle();
$(this).toggleClass("active");
});
});
My problem is that there is now a duplicate dropdown prepended NAV (1 on top of the other), like so:
+ MENU
+ MENU
The one NAV works but the other doesn't ... anyway regardless, when my media query hits 'mobile status' (below 767px) and the NAV prepends to a dropdown, this is when I DON'T want the whole slide-down-effect-clone (first jquery posted above) thing anymore. I want that rule to almost not exist or not apply when I'm below 767px screen width. How can I do this?
I've tried one of the obvious like:
.shrink { display:none}
.slidedown .shrink { display:none}
which almost seems like I've hit the jackpot leaving me only 1 prepended menu:
+ MENU
but nothing happens when I click on it - it doesn't slidedown and show the menu list items.
but I'm thinking like adding a rule within for the javasacript:
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
that when we get below a width of 767px, we ignore the clone() function / rule etc?
I've done some googling of removeclass etc but because I'm a bonehead at javascript, I'm probably doing it all wrong.
Any help I'd appreciate it?
Since you want to hide that menu based on certain viewport dimensions, why not use a media query?
#media all and (max-width: 766px){
.shrink{ display: none; }
}
or
.shrink{ display: none; }
#media all and (min-width: 767px){
.shrink{ display: block; }
}
(That might not be the best width values or CSS properties to use there, but that should get you started.)
Edit: If you wanted to do the entire thing in javascript, the matchMedia() API is there for you, too.
If the CSS media query approach that ajm posted does not work for you, you could try only executing your code if a media query is met. The code in handleMediaQuery() will only run if the width is above 767px;
//Media query listeners
var mql = window.matchMedia("(min-width: 767px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);
function handleMediaQuery(mql) {
if (mql.matches) {
// Do stuff here that you want done when the query matches
}
else {
// Do stuff here that you want done when the query does not match
}
}
See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries for more info

Make div fixed only inside another scrollable div

I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?
If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.
Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}

html div not allowed to go off page

First off, let me give you a little background. I am creating a responsive page using % for positioning my divs. It allows the user to drag and drop items wherever they please. The issue arises when the user places the object to near the edge of the page. When you resize the browser the images start to go off the page and get cut off.
#div1
{
overflow: hidden;
right: <?php variable>;
bottom: <?php variable>;
}
#div2
{
overflow: hidden;
left: <?php variable>;
top: <?php variable>;
}
What I would like to try and do is allow the percentage's to control the placement up until the edge of the page. Then I would like to hardcode the variables to something like 10px so it never goes of the page.
I thought of doing this in javascript(if statement('s)), but thought maybe there was a simpler way(css properties). Any help or suggestions would be greatly appreciated.
Thanks,
Rob
If you are going to use javascript you need to have a separate function that triggers on browser resize:
window.onresize = function(event) {
//your code here
}
or if you are using the popular jQuery
$(window).resize(function(){
//your code here
});
is the same.
If you want to hardcode it with css use a #media query:
#media(max-width:767px) { /*or whatever you want to use to trigger the css that will be used after browser size fits your problem */
.myImage {left:10px;top:10px;}
}
More info on what you can use with #media can be found here http://www.w3.org/TR/css3-mediaqueries/
If you ask me I think that you will accomplish a much more solid solution using javascript and since I suspect you are using js to drag elements around just go with it for resizing and repositioning too.

Always on top html block for iPhone

How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.
Update: The solution needs to work on iOS
Here's some CSS:
.bottomFixed {
position:fixed;
bottom: 0;
/* technically not necessary, but helps to see */
background-color: yellow;
padding: 10px;
}
Here's some HTML:
<div class="bottomFixed">Hello, world!</div>
This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.
div.bottom {
position:fixed;
}
Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.

Categories

Resources