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.
Related
I am trying to teach myself how to modify the DOM using JavaScript. I am at a loss about the following.
This is an HTML snippet.
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
</body>
</html>
I expect to get a similar result from the external js file linked in the script, which contains this:
document.getElementById("myDIV").innerHTML="<p>While this one comes from a separate JS file</p>";
But nothing happens... I realise this is probably silly, I apologize.
The first script runs and sets the content of the div to "While this one comes from a separate…"
Then, after some time which is imperceptible to a human, passes the second script runs and sets the content of the div to "Try this one comes from script…".
If you want both paragraphs to appear you need to append (e.g. with +=) the data instead of replacing it.
That said, appending chunks of HTML with innerHTML += can cause some issues (it's inefficient as that whole chuck of DOM has to be regenerated and it will blow away inline event handlers) so you are usually better off using the insertAdjacentHTML method instead.
The output depends on where you have included the external js. If you have included it before your embedded script, it will not have any effect, as eventually, it will be overridden by your embedded script. However, if you include the external js after your embedded js, it will work as you want to.
<html>
<body>
<h1>A heading</h1>
<div id="myDIV"></div>
<script type="text/javascript" src="thejs.js"></script>
<script type="text/javascript">
document.getElementById("myDIV").innerHTML="<p>Try this one comes from script inside html source</p>"
</script>
<script type="text/javascript" src="external.js"></script>
</body>
</html>
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');
});
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'm wondering if it would be possible to have common elements between pages that don't refresh when you change pages.
More specifically, what I mean is: I have a header that is common to several pages, and contains the links to the pages themselves. Only, whenever I click on the header, the whole page refreshes, with the typically annoying flickering that comes with it. I would like to know if it would be possible to have the header fixed between pages, so that when I click on a link to change page the content refreshes but the header doesn't. (The same goes for the background as well).
What I have right now is this:
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("../header_footer/header.html");
});
</script>
and in the body (common to all pages)
<body>
<div id="header"></div>
</body>
Is it possible to do this with just HTML or Javascript?
Thanks!
Unfortunately, this isn't possible using traditional page loads. If you don't want the flickering, I'd recommend making your site a Single Page App. Basically, you'd be loading your page once in the browser, and then all subsequent pages are dynamically loaded into the DOM via Ajax calls.
<style>
#pg2,#pg3{display:none;}
</style>
<body>
<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">
</div>
<div id="pg2">
</div>
<div id="pg3">
</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
pg[1].style.display='none'
pg[2].style.display='none'
pg[3].style.display='none'
pg[p].style.display='block'
}
//]]>
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.