jQuery Mobile Div at top - javascript

A bit of a strange request, I know.
I have a jQueryMobile page, a simple one as you can see:
<div data-role="page" class="type-home" id="home">
<div data-role="header" data-theme="b">
<h1>Our Tools</h1>
</div>
<div data-role="content">
<ul data-role="listview">
......
I need to put a Div containing a 100 px high content at the very top, outside any styling or div that jQuery Mobile uses.
How would that be done, as adding a plain Div as is just gets covered by jQuery Mobile.
I can't use an iFrame, it has to be all on one page in html.

If you are wanting a static header-type DIV, this is what works for me.
I put a "header" with fixed height and then offset the "content" with a margin-top like below. .ui-content is a class that is added automatically by jQM.
HTML:
<div data-role="page" id="somePage">
<div class="ui-bar ui-bar-b">
<a data-role="button" href="#main" data-transition="none" data-theme="a"></a>
<h1>Some header</h1>
</div>
<div data-role="content">
<div id="someDiv">
</div>
</div>
</div>
CSS:
.ui-bar {
position: fixed;
height: 100px;
z-index: 10000;
width: 100%;
padding: 0px 5px;
box-sizing: border-box;
}
.ui-content {
position: relative;
padding: 10px;
margin-top: 100px;
}

Related

How to position <div> absolute to parent and relative to neighbors

I'm working on a simple little project right now and I can't seem to figure out the styling.
Basically, what I need to do is position a 'div' a certain number of pixels down from the top of its parent. To do this I made its position absolute and set top to whatever pixel offset I need. The problem with this is sometimes two 'div's will be at the same vertical position (or close to it) in the parent and will overlap. I need to have them line up side by side horizontally when they are overlapping. I know how to do this with a position of relative and the float property but this then breaks the vertical positioning.
The boxes are inserted dynamically with jQuery and their positions can change frequently.
Here is a jsfiddle to demonstrate.
HTML
<div class="main">
This is okay
<div style="top: 25px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 100px;" class="sub">
<h3>
test
</h3>
</div>
<div style="position: absolute; top: 200px;">
This is the problem
</div>
<div style="top: 250px;" class="sub">
<h3>
test
</h3>
</div>
<div style="top: 260px;" class="sub">
<h3>
test
</h3>
</div>
</div>
CSS
.main {
background-color: grey;
height: 700px;
}
.sub {
border: thin solid black;
position: absolute;
}
you may make the sub div's inside other div and give this one absolute position
.main {
position:relative;
background-color: grey;
width:100%;
height:auto;
}
.sub {
position: absolute;
top:100px;
width:100%;
}
.child {
border:2px solid black;
width:500px;
height:500px;
margin:10px auto;
}
<div class="main">
<div class="sub">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
if you want them horizontally add to .child
float:left;
width:47%;
margin:1%;
As far as I can tell this isn't solvable with CSS. I ended up doing some decently complex javascript to detect collisions and reposition the div's appropriately.

How to fit child div inside the padding of parent class?

I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.
I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.

Change html page position when page is loaded

When I open my html, I would like to see a content of the first Home div.
When I'm opening it, the page is blank, and I need to click on Home href to see its content.
What can i do to see it when it loads?
HTML:
<div id="nav1">
HOME
</div>
<div id="nav1">
GALLERY
</div>
<div id="nav1">
IMPORT
</div>
<div id="nav1">
ABOUT ME
</div>
<div id="nav1">
CONTACT
</div>
<div class="target">
<div id="home">asddsa</div>
<div id="gallery">asdfgaasd</div>
<div iv="s1">some1</div>
<div id="s2">some2</div>
<div id="s3">some3</div>
</div>
CSS:
.target {
float: left;
background-color: white;
padding: 15px;
width: 800px;
opacity: 0.9;
min-height: 600px;
}
.target > div {
display: none;
}
.target > div:target{
display:block;
}
Use window.location:
<script>
window.location = "#home";
</script>
Jump link:
HOME
The script runs on load and navigates to the link

Trying to get equal height columns with expanding text whilst using overflow with CSS transitions

Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?

Toggle Sidebar with sticky header and footer

I would like to be able to have a side bar that can be toggled in and out on a button press. However, I'd want this sidebar to go with the main content of the page and fit between a sticky header and a sticky footer.
My problem is that when I scroll the sidebar stays fixed. I want the sidebar and page content to be able to scroll together and the header disappear. Then the page content will scroll while the header stays where it is. Then once the bottom of the page is reached the footer comes in which will shrink the bottom of the sidebar. If there is overflow in the side bar then the sidebar should be scrollable.
I have a nearly working example using bootstrap and simple-side bar template here: https://jsfiddle.net/co7080j6/. The only problem is that the side bar doesn't adjust it's position with the sticky header and footer.
The html I'm using is here:
<body>
<!-- Navbar -->
<nav class="navbar navbar-inverse" style="margin: 0;">
<div class="container">
<a class="navbar-brand" href="#">Project name</a>
</div>
</nav>
<!-- /#navbar -->
<div class="container-full" >
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Start Bootstrap
</li>
<li>
Events
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper" style="height: 900px">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default"
id="menu-toggle">
Toggle Menu
</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</div>
<!-- container-full -->
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
And besides bootstrap and simple sidebar (I removed z-index on the sidebar) I'm also I'm also using:
/*MY CSS*/
.container-full {
margin: 0 auto;
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #333;
}
*I'd also like it if the header came into view any time the window scrolled up, but I think I can get that myself once this is resolved.
This is more of a CSS issue than anything. If you make the following changes to the CSS file, you get the functionality you desire.
#sidebar-wrapper {
position: absolute;
height: 90%;
}
.sidebar-nav {
position: fixed;
top: 55px;
left: 30px;
}
Also need to include a little extra JQuery to get around the fact that the sidebar-nav text doesn't hide when position is set to fixed.
$(document).ready(function() {
$('#menu-toggle').click(function() {
$('.sidebar-nav').fadeToggle(300);
});
});
Here's a JSFiddle
I'm not 100% sure you wanted the sidebar text to scroll or stay in place. If you want it to stay put, simply remove the .sidebar-nav CSS changes I made. And here's the JSFiddle for that.

Categories