I am currently writing out a HTML document, and I'm trying to include Bootstrap's Js file. However, each time I try to do so, it will just make my page appear blank white. I know it is something to do with the head of the document, but i'm unsure why this is happening...
So I viewed the source code via chrome, and I get this (click image to enlarge)
So when I remove the Bootstrap.js link It goes back to normal, content reappears again, like this. (click to enlarge)
By me saying content not showing and reappearing, I literally mean the visual side upon previewing.
You have this:
<script src="js/bootstrap.js"/>
<script> tags don't support auto-closing. Use this instead:
<script src="js/bootstrap.js"></script>
Related
I have been working with html and css for about 6 months, and a very very little javascript.
I recently saw this site here: http://daegonner.com and i noticed if you click "vote" it opens up this window box, but on the same website.
How is this made?
There are some thing you need to do to have that look.
Firstly you need to create that small windows using css and html, by the way it's called modal (like this one http://getbootstrap.com/javascript/#modals)
Secondly, you need to study javascript onclick events (you can refer here http://www.w3schools.com/jsref/dom_obj_event.asp), which help the small window display when you click to vote link.
Finally, the content inside that box is up to you. The page which you gave embed the content from another page through .
Look for CSS Popup or Lightbox on Google, you will finde something helpfull
You will have to include the jQuery library within the <head> tag:
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
And then download, include and use some of these plugins or whatever else you find.
http://dimsemenov.com/plugins/magnific-popup/ (recommend - very good and easy to use)
http://www.jacklmoore.com/colorbox/
Scripts should be included in the <head> part is what I learned from w3c.
Why does Boostrap suggest to load itself in the <body> part as seen here:
http://getbootstrap.com/getting-started/#template
Scripts are technically supposed to be loaded and executed at where they are placed in the body. Imagine that your browser reads your HTML from top to bottom. If the script include is at the top of the document, then the browser is supposed to idle while it fetches the script from the web server.
A more detailed answer is available at
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
if the loading script is at the bottom of the body tage then it will be loaded last, making the rest of the page appear as if it is loaded faster
That really depends on that is on your page. If your page has things that need the js in order to work before displaying to the user, it would be wiser to load them before showing the html to the user
I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).
These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.
My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.
How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?
This is my <noscript> tag, at the bottom of the page:
<noscript>
<div class="scriptError">
<h1>Javascript is disabled!</h1>
<div id="noScriptNotice">
<p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
</div>
</div>
</noscript>
Everything else (including links) is inside this div:
<div class="scriptedContent" style="display: none;">
<script>
//If scripting is enabled, display the site.
$(".scriptedContent").css("display", "block");
</script>
If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.
The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:
font-size: 0;
text-decoration: none;
That should do the trick of hiding the links, that is, if your CSS is affecting them at all.
If not, try to "right click > view source" of the page, and then view and compare the source with your own.
Alternative if that does not work:
Try making your links (in the HTML code) something along the lines of:
Text
and seeing if that stops them from overriding your Styling.
I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.
With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)
You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div
<iframe style="border-width:0px;" src="news.html"/>
You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.
You could use jQuery's load() function.
You'd have to add the following to the head of each of your pages:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then you'd have to add the following DIV where you want the content to be loaded.
<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>
Be sure to edit the link to the news.js file.
Then you'd create the news.js on your server, and add the following code:
$('#breakingNews').load('path/to/breakingnews.html');
More about load():
http://api.jquery.com/load/
Not the nice solution, but if you really want to have single point of menu definition, include it in the script which includes setMenu function and you load the script in every page's head and call a setMenu function on every page's body onload, which then sets the menu as innerHTML of the div that you include in every page specifically as a menu placeholder.
Client side templating may be a solution if you are trying to avoid server side solutions for dynamically generating your content.
Using ICanHaz.js templating, http://icanhazjs.com/, you could store your html as objects. Then either include them directly as .js files, or make ajax requests for them.
We have a web content management system and I can't get to the header portion of the page. I can see it in the full page when debugging, but can't upload a revised file.
In the header, there's a portion of the same Javascript - about six lines, but it's truncated and not closed.
In the body, I have the full slideshow Javascript which works great in Firefox, Safari, and Chrome. Strangely it even works in IE8 on my PC, but not on the other 10 pcs I've tested it on.
The only thing I can edit/save changes is the body portion of the page.
I originally thought javascripts had to be in the header, but clearly not since the body script is working in the other browsers. Do you know though if IE8 requires the script to be in the header?
I think the problem is defintitely 1) a partially coded, unclosed script in the header and/or 2) perhaps javascripts have to be in the header for IE8?
In that case, I would need the remote server company to post the javascript that's currently in the body into the header.
Thanks for your help,
Debby
Script elements are allowed in many places and MSIE doesn't impose any additional requirements.
If a script element is unclosed, then everything until the next </script> will be treated as part of that script. If that includes HTML then it will error and stop running that script.
Script tags doesn't have to be in the head section. You should place them there unless you have a good reason not to, but it works just fine to have script tags in the body also.
The unclosed tag is quite likely to cause problems. At worst the browser will just ignore everything until it finds a closing tag for it. If you can't get rid of it you should at least put an empty script tag first in the code that you can control.
There are no limitations on where you keep your code, it is common practice that included javascript libraries (such as jQuery, mooTools, etc) go in the <head> element, while custom javascript goes in the end of the <body> element, because it will only run after all the other things in the page were already downloaded.
The reason for your problem is probably the unclosed <script> tag in the head. It makes everything until the closing </script> tag as script, even critical HTML. Which makes the page render incorrectly, and your javascript to throw errors.
Close the tag and resume with your own body
</script>
</head>
<body>
//... your code