I know there is multiple ways to include a navigation bar using JS or JQuery and the script tag in the page you will use it,but for me ,this is not ideal,cause once you use the script tag,you can no longer use JS in your page.Is there a way you can create a nav-bar using js,(f.e. navbar.js), then lets say for example i have a frontpage.html with src="frontpage.js" and in frontpage.js,i can use require('./navbar.js') that will create my navbar.
$(function(){
$("#nav-placeholder").load("req/nav.html");
});
You can use this technique in Jquery. Just Simple.
Related
I am building a webpage using Bootstrap 3. I am trying to find the best way to change the main content of the side. I have a Header, left content and right content but I want to change the middle content by pushing a button without changing the surrounding elements. What would be the best thing to use to accomplish this. Is there some demos online that someone can point out? I have been trying to find some but without luck.
Bootstrap doesn't have that feature. First try to learn what bootstrap can do or can't, what bootstrap made for.
What you are trying to do is called templating. You can use php, ajax or other methods to dynamically add content to your content section of your template.
You have many ways to do that, maybe with jQuery .load() and maybe combined with HTML5 history API or some other framework...
But Bootstrap has nothing to do with that..
You can start reading about AJAX and DOM manipulation first, but here is some link you can use:
Dynamically Loading Content in Twitter Bootstrap Tabs
You cannot do that with boot strap that is just not what it's made for you can use either PHP or Ajax personally if you know PHP already and have everything set up for go with that because in my opinion Ajax sucks to learn and work with
I am working on standalone JavaScript application which is being coded in HTML 5.
It has almost 50-60 html pages including repetitive markup such as header, footer and nav.
But if I have to make change in header then I have to make changes in 56-60 pages.
Is there any solution to use reusable html markup so if I did changes in one page it will reflect to other pages?
I can't even use php.
Prepare one javascript function. Write your html elements through javascript or jquery function. run it in page load event. and call the function in html by div.
Put this javascript function in separate .js file. And call this js file in wherever you want. And just place the div wherever you want in the html page.
See this jsfiddle DEMO
I Hope this demo will useful to you in this situation.
If you are using HTML (.html) pages and do not have Server-Side-Includes option then you can use a JavaScript template (which is not too difficult).
Second option : use of iframe.
Write the whole javascript code in common_layout.js
Add every statement using id of that div and add this file with main layout.
$( document ).ready(function() {
$('#header').html('<b>Header</b><ul><li>First Link</li><li>Second Link</li></ul> ');
});
UPDATE: One of my favorite post from TutsPlus : Best practices when working with JS Templates
If you are just started with this application. You can think of using client side java script frameworks like - AngularJS. It would be lot easier to maintain the code and solve such trivial issues.
You can use object tag like this:
<object name="header" type="text/html" data="header.html"></object>
Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.
I want to make a theme swither using jQuery, I see the example made in the docs of the jQuery mobile page, but it's exhaustive as it dublicates the same page but with different theme swatch as a result it affects only one page in the App, I want a theme switcher that affects all the pages of the App, thanks.
Perhaps storing the selected theme (local storage/cookie) and using jQuery to grab that value and add a style element to the page?
Consider using jQuery UI and their themeswitcher - http://jqueryui.com/docs/Theming/ThemeSwitcher
It works great on our internal site. If nothing else, look at the way they do it and you should be able to come up with your own customer solution rather easily.
Use a session variable to determine which CSS to include.
If you visit this page: http://basecamphq.com/tour/
and click on the tour left hand side options: communicate, share files, deliver-on-time you will see that the tour works like a slide show when you click it shows you the next slide. How can i implement this for my website.. are they using javascript or ajax?
Thanks.
They are using Jquery,
This is the specific glide effect they are using: http://code.google.com/p/missingmethod-projects/wiki/Glider
If you want more kinds of it you can use http://www.hacktweaks.com/2010/02/15-awesome-jquery-based-content-slidesowglider-for-your-blogwebsite.html Each one of this examples contains a demo and and explanation, and the jquery code you will have to put in the web page.
Its a simple Content Slider that can be implemented using simple content slider using jQuery.
Here is Implementation Cookbook and a Simple Demo
remember its just a simple demo and you can do every thing you want just using this simple plugin.