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.
Related
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;"
Is adding a display:inline all that is needed for the browser display to treat the <div> as a nonexistent element (do want to consider everything inside the div though) in HTML?
I was thinking of having this div simply as a placeholder to put content into it from javascript and I was wondering whether it would be a good idea to make it display:inline
NOTE By nonexistent I mean that if the user says he wants to display the following on the page
<something here>
<something else here />
....
</something here>
Then the end result on the UI would be exactly what he wanted. Putting a div around it currently is adding a newline between this and other things.
I add this divs around something the user (the user being the programmer that is using the functionality I write) outputs in a function. I want to keep this divs completely invisible to the user. Currently there is a new line injected at times. For example there is a newline in between the two buttons
<div>
<button>Something</button>
<div>
<button>Else</button>
</div>
</div>
As long as you haven't styled the div with any width, height, margin, or padding you can leave it as is. No need to add "display: inline;". It's natural display: block; is just fine and won't take up any space as long as it is empty.
Then, if you inject content with, say, javascript the div will grow to fit the inside content.
Apparently a div has some display properties by default in the browser. Using a tag like <placeholder> seems like a good alternative that does not affect the UI at all.
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"); });
Been working on the same problem and am now trying to use a different solution using visibility:hidden; visibility:visible; . The issue I am having is not making something visible or hidden, but rather combining two elements to play off each other. For example here is what I have:
<div id="external"></div>
<div>
<img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.external.visibility='false';document.external.visibility='true';"/>
<img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.external.visibility='true';document.external.visibility='false';"/>
</div>
When I click on the first image or button, I want the external div to switch from its current state of visible to off and replace that div with another element already in the div that is hidden, switching this element to true and holding it there.
Then I want the second image or button to do the exact opposite switching the states from off to visible of the first element and then turning the 2nd element off. I am not good at writing JavaScript code and reading some of the solutions online are Greek to me. So if anyone understands what I'm trying to do would be much appreciated.
It looks like you are trying to toggle the visibility of the div based on a click event to one of the images. Try using the event onclick instead, and correctly reference the div's DOM properties:
document.getElementById('external').style.visibility='hidden';
Here is an example.
You're probably better off using style.display='hidden' instead of the the visibility property. That would look something like this:
document.getElementById('id').style.display = 'hidden'
to hide
and
document.getElementById('id').style.display = 'block'
//or inline or inline-block as needed
to show again.
==================
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.