I have a website and I want to use my dropdown menu as a separate code from any links in website.
http://www.stelianpopa.ro/photo/ancar.html
I use the code for my menu in menu.html and I integrated on website based on this example: http://api.jquery.com/load/
The codes are loaded but most of the time the drop menu doesn't work, even if appear to be loaded, it shows only the first line and not the submenu for "photo" and "video"
Any help for that?
Basically wat I want is to have my menu as an independent file and to be loaded on any html on my website as a reference, because when I want to add something in the menu I had to do it on every single html and that's why I want to be standalone, to modify once for every html.
Sorry for my bad english.
If not already, make a html file that includes your menu (dropdown).
Then, on every page that you want to use the menu, include an iframe pointing to the html file you created for your menu.
For example:
Menu.html
<html>
<head></head>
<body>
<!-- code for menu -->
</body>
</html>
Every page you want to use the menu on
<html>
<head>...</head>
<body>
<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>
</body>
</html>
Hope this works for you.
Without templating, you can use javascript to load template onto the page. I would set up a mini project for this to avoid copy-pasting, but the basics are below
In the body where you want the menu:
<div id="my-nav-menu"></div>
script:
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementById('my-nav-menu');
menu.innerHTML = 'menu html here';
});
Update
I just noticed the jquery tag, so you can use the following script instead:
$(document).ready(function() {
$('#my-nav-menu').html('menu html here');
});
Related
I have problem with jquery.
I want change link to src when is only "document.write".
My code:
myscript.js
document.write("TEST ABCD");
test.html
<html>
<body>
<button id="example">click me</button>
<div>my site example text</div>
<div id="my_div_important">
Old test
</div>
<script>
$(function(){
$('#example').on('click',function(){
$('<script>').attr('src', 'http://example.com/script.js').appendTo('#my_div_important');
});
});
</script>
</body>
</html>
If click "#example" than in page write: TEST ABCD but all the rest is HIDDEN... URL is to same (no redirect).
When is problem?
--- UPDATE
I want to do a widget where users will use on their sites.
The panel of users want to do a preview of different sizes and therefore need to update the script SRC tag script (example.com/widget/normal/250|300 itp.)
document.write deletes all the content if your page is already fully loaded (as you do a write on the document object).
Also you should use jQuery.getScript() for dynamic loading of scripts.
I am trying create a web page with sidr plugin & jquery. When someone click on a list item it will do something like saying which item is it.
I've created a basic html file like:
http://pastebin.com/hc4QyxW6
with calling jquery and sidr library as you can see. My css file is the one provided by sidr.
When I click on the ones on body, no problem. But when I click the items on the sidebar it jquery won't activates the click activity? How can I make the ones in sidebar work? I am looking for a solution for 5 hours. Please help :D
Thank you.
Here is My file
A few tips: your doctype is very old html5 is plainer and suited for jquery. use this:
<!doctype html>
<html>
</html>
secondly all of your css for jquery comes before the script to call jquery.and the script to actually use the jquery should be in the head of your document. if you are using jquery and jquery ui jquery must be listed first or the ui wont work. after that you should be able to link everything with the id's (the #'s withnames). like this:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
after that the javescript selectors ($document.ready function) or css id's ( #id_name {whatever-style :attribute;} ) get applied to what your want the to by id'ing them in the element you want them used in ( like div id="#demoheader" or div data-role="content" id "demoheader" or whatever.) i hope this helps.
I have a page where I want to display content from a website inside my app. I have a parser which in this case grab the element from their site and into mine. But I have this problems, the links serverside are like campaign.aspx?wfege, when a users clicks it, I want to add a http://example.com/ before so the link will result in looking like http://example.com/campaign.aspx?wfege. It this possible in javascript? If so, how? Please look at my fiddle, it's fully working and is an exact copy of my site.
Fiddle: http://jsfiddle.net/4vdck/
Cheers
This can be done in your HTML.
You need to add the base tag with the appropriate href, like this
<html>
<head>
<base href="http://example.com/" target="_blank">
....
....
</head>
<body>
ClickHere <!-- Because of the base tag this href will lead you to http://example.com/campaign.aspx?wfege -->
....
</body>
</html>
I wanted to insert this ad code.
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
right after
<div id="adminmenu"></div>
So that the output of the script will be displayed after the adminmenu div
Is there a way to do that using jquery? I tried .insertAfter but it only works on plain html.
Render the content first in a hidden, temporary container:
<div class="temp">
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
</div>
then move the contents after it is rendered:
$('.temp').contents().appendTo(finalDestination)
If a script is using document.write() to emit content, then you have to place the script in the place that you want the content to go.
If you control the script, then you can have the script not emit it's content by default and you can call a function in the script and pass a parent object that directs the script where it should put it's content (which it will not use document.write() to create).
The only other option is to place a div around the script, let it emit the content into that div and then move that container div to another location in the page after it runs.
<div id="ads">
<script type="text/javascript" src="http://website.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
</div>
<script>
$(document).ready(function() {
$("#ads").appendTo("#myFooter");
});
</script>
I'm not sure exactly what you're trying to ask about jQuery. jQuery is capable of inserting dynamically created content anywhere you want in the page. You'd have to ask a more specific question for us to advise in more details.
How can I give javascript for every div instead of the whole page?
<head>
my jquery
my javascript for the whole page
</head>
<body>
<div id="cc1">
Some content - I want to add Javascript for this div
</div>
</body>
I know we add javascript only in head of the page or we call functions write in external js in onclick of html button events.
I need separate JS for each div because I am going to have a <noscript> in every div to show some static ad content if user has disabled javascript ; else if user has already enabled javascript, I am going to generate a dynamic ad content with my own javascript.
So how you do it?
It sounds like you're wanting to do something like this:
<div>
<script type="text/javascript">
document.write("Content A");
</script>
<noscript>
Alternate content
</noscript>
</div>
<div>
<script type="text/javascript">
document.write("Content B");
</script>
<noscript>
Alternate content
</noscript>
</div>
This is an old-fashioned way of doing things and I don't recommend it. An alternative to using inline script/noscript tags is to put the "noscript" content in the divs, then replace the content with JavaScript after the page loads; that way, if JavaScript is disabled, the original content will remain.
If I get your question correctly, you cannot really add JavaScript for a div, you should add it for the whole page and then use it just in that div.
To make something happen inside that div, you have to work with <script> </script> tags and address that particular div. Otherwise just add another .js file on the head of the HTML file to make it do something on that div.
Hy
You can get a reference of that DIV, with var dvo = document.getElementById('id_div');
Then you can do and apply what you want to only that div.