I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.
Related
My website consists of a navigation bar (class .nav-primary), a widget box (id #mw-panel) and an article. Recently, I tried to move the widget box up to the top, by applying the following changes to my CSS file:
.mw-panel{top: 50px;}
The problem with this option was, that my element was fixed to a specific position. Instead I wanted the widget element to be exactly 100px under the menu bar (and moving when I am scrolling down the page). Instantly, I knew that JavaScript would be the correct way to solve this problem.
Because I had no success, I asked the StackOverflow community, which helped me a lot.
The JavaScript code in the JS section of the attached code snippet, was partially done by me, but it does not work as it should.
Can someone explain me what I need to change to get this JS code working? Again, #mw-panel has to be positioned exactly 100px beneath .nav-primary.
var menu = document.getElementsByClassName("nav-primary")[0];
var widget = document.getElementById("mw-panel");
var difference = widget.offsetTop - menu.offsetBottom;
if (difference > 100) {
document.getElementById("mw-panel").style.top = (menu.offsetBottom + 100) + "px";
}
.content .entry {
margin-top: 40px;
padding-bottom: 400px;
}
<body class="full-width-content">
<link rel="stylesheet" id="child-theme-css" href="http://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" >
<div class="site-container">
<nav class="nav-primary">
<div class="wrap">
<ul class="menu genesis-nav-menu menu-primary">
<li class="menu-item">Home
</li>
<li class="menu-item">News
</li>
<li class="menu-item">Ranking
</li>
</ul>
</div>
</nav>
</div>
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<article class="page entry">
<div>
<h1>Test Article</h1>
</div>
</article>
</main>
</div>
</div>
<div id="mw-panel">
<div>
<h3>Navigation</h3>
<div>
<ul>
<li>Letzte Änderungen
</li>
</ul>
</div>
</div>
<h3>Werkzeuge</h3>
<div>
<ul>
<li>Datei hochladen
</li>
<li>Spezialseiten
</li>
</ul>
</div>
</div>
</body>
There's No such property as offsetBottom. Redo your code ONLY considering offsetTop + offsetHeight to get bottom number.
Example:
var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;
You're getting the error because there is no offsetBottom property.
Do console.log(menu) in chrome to see the objects available properties
**Update:
Add this to your css:
.mw-panel{
position: absolute;
}
Here it is in action
Updated code in action
After re-reading your question, I missed one key detail: you're trying to do this JavaScript. This is your problem.
If I understand correctly, you have three items: a nav, an article, and a widget box. You want the widget box to stand 100px below the nav, and then move with the page when you scroll.
if this is the case (if not, correct me), then there's only a few things you need to do:
Keep your nav the way it is. Good job here.
I'm assuming you want the widget next to the article (on the left?). So you'll need to make two columns (some sort of containers, each height: 100%). Your widget container will have the property position: fixed; and the article will have position: static; (or relative, you decide).
Each container will have a width, you might choose 30% for the widget container and 70% for the article, for example.
Now you have two columns, one will move with the page as you scroll.
Here are some links to get you started:
Best Way to do Columns in HTML/CSS
https://css-tricks.com/guide-responsive-friendly-css-columns/
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Hopefully this is somewhat simple to figure out. I have a list of items of an unknown height and a content editable div underneath it. I need to figure out how to resize the list when the content editable div gets bigger with content. Is there a css trick that I missed somewhere? Do I need to listen for an event? What's the best solution here?
Here is a fiddle to show what I'm talking about.
here's html structure in the fiddle just cause it makes me post code with a fiddle.
<div class="containerDiv" ng-controller="MyController">
<ul>
<li ng-repeat="item in items">
<p>{{item.message}}</p>
</li>
</ul>
<div id="inputDiv" contenteditable></div>
<button ng-click="addItem()">Add</button>
</div>
For example look at the facebook chat window. How does it resize when you have multiple lines of text before you send the message? Is there a simpler way of doing it?
First, you need to encapsulate your list in a div and let that div be dynamically handled by CSS.
You would then need to modify your height property and make the same 'auto'.
Next, provide a min-height if you require.
containerDiv {
border:1px solid blue;
height:auto;
width:150px;
min-height:100px;
}
.containerDiv ul {
height:auto;
overflow-y:auto;
}
Updated JS Fiddle: http://jsfiddle.net/q78jN/1/
My new home page has a position fixed header at the top of the page and the container holding the content scrolls up underneath that.
Theres a text box that on the left which I want to fix so that its always visible when the rest of the content scrolls up.
The container which holds all copy is positioned relative with auto margins so that it sits central onscreen.
I haven't been able to find code online that will enable me to keep the div in the container and therefore obey the central alignment of the container, but be fixed below the header while the rest of the container scrolls.
Any ideas how I could do this please? Is it javascript or CSS?
Any help would be greatly appreciated.
I have tried putting the text box and header in one div together, but then the content gets pushed down. I read that floating should work but doesn't. I have looked at 'sticking' the text box to the bottom of the header div, but can't seem to get that to work.
See www.broadleydesign.co.uk/test3
NB. Apologies if the header isn't stuck at the top in IE on your machine; I haven't sorted any workaround yet. There should be a white space at the top with the logo and top links in. The images should scroll up underneath that. I haven't got a pc to check it!
You need to move the ul into the head section and give it position: fixed css, not position: absolute. See my example below using your code:
<div id="header-cont">
<h1><img src="images/background/logo.jpg" alt="Broadley Design, Graphic design and image production"></h1>
<div id="home">
<ul id="titles">
<li>home
</li>
<li>profile
</li>
<li>contact
</li>
</ul>
<ul id="sideheads">
<li class="firstsub">
<img src="images/headings/broadley_design_co.png" alt="">
</li>
<li><span class="bold"> Diane Broadley</span>
</li>
<ul class="sublistwider">
<li>A freelance graphic designer specialising in print, providing a one
<br>to one service, design solutions and production to ensure that your business gets into the hands of the people who
<br>matter to you.</li>
<li>Working both directly with small businesses, designers and publishers
<br>in the South West.</li>
</ul>
</ul>
</div>
</div>
Give the position:fixed css property to the target div.
<div class="fixed">Fixed Text</div>
and style it as:
.fixed {
position: fixed;
top:10px;
left:10px;
}
DEMO
I have suggested a jQuery(javascript) plugin HERE
There are various JQuery plugins that can help you do what you want.
This functionality is called as "sticky scroll"
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.