dynamically changing CSS Using jQuery on $(document).ready - javascript

i have a template with the page header which margin changes depending on the page i'm in.
my template is something like:
<div class="header"> Title - Menu </div>
that header is equal in every single page, except the margin-bottom
i have this jQuery code which works right with one problem (this is in-line code at the top of the each page) :
$(function () { $(".header").css("margin-bottom","0px"); });
or
$(function () { $(".header").css("margin-bottom","30px"); });
the problem is i see the page with margin of the template, and then it changes the margin dynamically. it looks bad, at refresh it have a blank space between header and body and then disappears 1 second later.

Look into FUOC:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content.
Assuming your CSS is being declared in your header, if you redefine it with jQuery after the document loads of course you'll see a flash of style changing. This is because, while your CSS is being rendered while the DOM populates, your jQuery is firing only after the entire page is done.
There's really no need to do this in jQuery. If you want to keep the changes inline, simply add something like this after your main stylesheet and adjust it for each page:
<style type="text/css">
.header {
margin-bottom: 30px;
}
</style>
Of course, if jQuery is a requirement for this, using an IIFE function will work.

This is because you are changing the margin on page load. I.e. inside $(function(){}). Therefore your css margin code runs only after the whole page has loaded. That could take some time.
So there are couple of things you could do. 1. Use script tag right after your div tag
<div class="header"> Title - Menu </div>
<script>
$(".header").css("margin-bottom","0px");
</script>
This assumes jquery has loaded (may be above body tags?)
This is however not a general practice. 2. Second option would be to assign styles directly to the div
<div class="header" style="margin-bottom: 0px;"> Title - Menu </div>

I'd prefer a solution where you render the header with two different CSS styles on the server side. That would avoid the issue altogether.
If nothing else works, you can force the browser to evaluate the script earlier while it's still parsing the page:
<div class="header"> Title - Menu </div>
<script>$(".header").css("margin-bottom","0px");</script>
That forces the browser to evaluate the script right after the div has been created but before the next element is considered. Note that the DOM won't be complete at this time. It's guaranteed that the div exists but things after those two lines might or might not be there.

Try this:
$(document).ready(function(){$('.header').css("margin-bottom","0px"); });

Related

Getting an element to share a background with another element?

I have a document that is styled like so:
<div class = 'page'>
<header class = 'site-header'>
<div class = 'main-navigation-container'>
...
</div>
</header>
</div>
where the header has a nice background-image. However, as soon as the header ends we reach the navigation bar, which has a stock blue option. I want to have the header background "spill over" into the
.main-navigation-container, so that it appears as if the .main-navigation-container is contained within the header.
Here's the idea:
Before
As you can see in the before, the navigation container (menu) does not share the background with the header. However, after the change it should look like this:
After
Notice that the menu is now changed to be located within the header. The issue lies in the fact that I am using Wordpress for the backend, so I had to add javscript to the body as opposed to redefining the html elements manually:
<script>
var nav = document.getElementsByClassName("main-navigation-container")[0];
document.getElementsByClassName("site-header")[0].appendChild(nav);
</script>
This approach worked when I used a test document on my local machine, but it does not work in Wordpress. Does anyone have any suggestions as to how I could solve my problem with either the approach I'm currently using, or an entirely different one?
Thanks.
EDIT:
SOLVED: It was an issue with the flow of the document. When you add custom javascript in wordpress they give you two options for script location: Body and Footer. I assumed I needed to put the script in the body, but when I tried moving the script to the footer it worked.
You can make the background of your nav transparent. You can add a custom class 'bg-custom' to the 'main-navigation-container', then in your CSS style sheet add:
.bg-custom: {
background-color: transparent;
}
or add it inline with a 'style' tag:
style="background-color: transparent;"

HTML , CSS: Table doesn't make my page resize accordingly

I recently downloaded a very simple template for my website.
It contains 1) a simple style.css and 2) an example index.php
On my attempt to edit that index.php and add a table, on the <div class="main_body"> area, the main content (main body) area, does't resize the height of the page accordingly.
However, page resizes just fine with <p> , <h1> tags , etc. The problem occurs only with tables.
Notice that i have tried to make it rezise with a couple of ways:
#main .main_body {height:auto;} code in: style.css 97th line.
table #displayblocktest {display: inline-block;} code: style.css 2nd line.
I uploaded everything on http://jsfiddle.net/48dog2sj/.
So, my question is, what changes do i need to make in order to make my page resize accordingly to tables size ?
Hopefully someone knows a way around this problem.
Lose the align=left--it's changing the default wrapping around the table: http://www.w3schools.com/tags/att_table_align.asp. Furthermore, it's deprecated; you should use the CSS float property instead.
Fiddle: http://jsfiddle.net/48dog2sj/1/
You have to remove the align=left off the table element!

html5: link to the #id of a div at a certain point on the page

I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?
I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.
Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!
I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})
If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.

keep div on top of the page while scrolling

==================
Name: //html text box//
age: //text box//
//div//
//table//
==================
Assume the above as a HTML page. Also assume the table has atleast 50 rows so that, the entire page could be scrolled. currently, when I scroll the page, the entire page (div, table) scrolls. I want the div to be at top of the page while scrolling such as the figure below:
==================
//div//
...
...
...
//row21//
//row22//
...
...
==================
I would like to know if this is possible at all. I tried using CSS for div:
//CSS for div:
position: fixed;
width: 100;
But, it displays the position of the div exactly where it was earlier. But, I would like to move the div to the top of the page while scrolling.
Thanks.
This is NOT trivial
You will need to use JavaScript to copy div and make its position fixed.
You will need to handle scroll event to hide and show fixed div
I have a small library to do such thing for table headers , I think you can read the source code or use as-it-is for a table
demo : http://www.agyey.com/demo/stickyhead/demo.html
code: https://bitbucket.org/anuraguniyal/stickyhead
This is not possible in the CSS alone. As you already know you can use:
position: fixed
to keep the element in the same place with respect to the browser window, but in order to move it to the top when the content is scrolled you need to use JavaScript.
You may want to look at this SO post to get an idea how to achieve that effect.
You need to add this to the css.
top:100px;//adjust til the div is below the name and age section.
position:fixed;
I think that's what you are looking for.

javascript turned off help

I am creating a small application where I am displaying some text wrapped in 3 divs so I am actually displaying 1 div at a time also there are prev and next buttons for users to toggle between the div's. Now when javascript is turned off i just want to display 1 div without the prev and next buttons. I have and idea that it can be done with javascript by manipulating the CSS like.
document.getelementbyid("id1").style.display="visible";
document.getelementbyid("id1").style.display="none";
Thanks
You could use the <noscript> tag to both define the styles of the scripted elements and display your alternate div instead:
<noscript>
<style type="text/css">
#scripted-div1, #scripted-div2, #scripted-div3 { display:none; }
</style>
<div>
<!-- Alternate content goes here -->
</div>
</noscript>
Arrange your default page view as it would be displayed with javascript turned off, and then, if it is on, you will be able to add desired elements into desired positions.
You can set those div's to display:none; (in CSS) by default, add id for both, and after page load set document.getelementbyid(..).style.display="visible"; (in JavaScript)
PS. u could use jquery or other, will be much more easy ;)
try this:
[style]#prev, #next { display:none; }
[js]
function showButtons()
{
document.getElementById('next').style.display="block";
document.getElementById('prev').style.display="block";
}
[html]
body onload="showButtons()">
div id="next">next..
div id="prev">prev..
This way without JS prev/next wont be displayed, and with JS they will show after page loads.
Maybe you could set the style inside a noscript tag.
Also, perhaps you should accept previous answers and respect the answers other have given you.

Categories