I am using jQuery Sticky header in my theme. It seems to work fine in most of the pages but in two pages it is displacing the content to the right on load and on scrolling down it places it back in the right position. i am trying to debug the issue with no results.
On Page Load
On Scroll
DEMO Link
Adding this will fix the problem:
.page {
width:100%;
}
Try removing overflow: hidden from .page at your css
.page {
overflow: visible
}
<div style="height: 50px;" class="sticky-wrapper" id="undefined-sticky-wrapper"></div>
<!--- PLEASE INCLUDE -->
<div style="clear:both"></div>
put style="clear:both" after header main div (#undefined-sticky-wrapper)
Used "clear:both" on .page
.page {
clear: both;
}
The problem is that the #nav is overflowing out of your header and pushes the page to the right side.
Related
Hi I have a situation where I want to show a button to user to Suppose like:
"Print" on click this button I want to show print preview to user that is a html table which I want to print. But I do not want header and footer that is using my application to all pages to show in this print preview to user.
So how can I make this possible to printout a html page without header and footer only content part.
Please help me I have tried many solutions for this but did not get worked anymore. I am using php scripting language(Symfony2 framework)
Thanks in advance
<style>
#media print
{
#header{
display:none;
}
#footer{
display:none;
}
</style>
This will make your header and footer invisible at print preview or printing time.
In you css, add the classes and specify this class for the container element of the header and footer which has to be hide while printing.
#media print
{
.print
{
display: none !important;
}
}
Hide header and footer when you are printing.
<html>
<script>
function print1(){
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("print").style.display="none";
window.print();
}
</script>
<div id="header">Header</div>
<div id="content">content</div>
<div id="footer">Footer</div>
<input type="button" onclick="print1()" id="print" value="print">
</html>
I have a html page, having two div's.Left div contains all contents(INDEX of pages) with hyper-links.Now i want to display the content in the right div, that the user has clicked.In right div i have divided the page horizontally into 3 parts..10%,80%,10%.In that 80% horizontal div it shd display the content.I tried by using the target attribute in anchor tag, but it is not showing in that right div.How to solve this?
You can Try This:
css:
div {
width:90%;
height:800px;
position:relative;
background-color:blue;
}
a {
color:white;
font-size:24px;
}
html:
<div id="one">Top of Page</div>
<div id="two">Go to Top</div>
<div id="three">Go to Two</div>
You can try using Iframes. Can refer this site to get started: http://www.dtp-aus.com/frm_sets/frames.html
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.
I want to display a div over an element (especially a link) when hovered, like in Facebook, when you hover a profile picture.
I know this could be done with JavaScript and CSS but have no exact idea.
Facebook's approach is to simply use CSS, which won't work in all browsers. In those browsers Facebook ditches the effect and always shows the element that should only display on hover:
#parent #child {
display: none;
}
#parent:hover #child {
display: block;
}
Use conditional CSS to set display: block as the default in IE7 and below.
This can actually be done with pure css, here is a simple example:
HTML:
<div id='outer'>
<div id='button'>
<!-- your element here -->
</div>
<div id='popup'>
<!-- your popup menu here -->
</div>
</div>
CSS:
#popup {
visibility:hidden;
}
#outer:hover #popup {
visibility:visible;
}
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}