I'm trying to run a script within a specific div only. With my current code, the script affects the image outside of the div as well. I'm using this code on wordpress within a html widget and when I insert the script code, it effects the entire page. I only want it to apply the specific html widget. This is also the reason I want to insert the script within a div, as I want to avoid adding the script to the actual web page (if possible).
Any help or work around would be greatly appreicated.
<html>
<head></head>
<body>
<div>
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js">
</script>
<img src="https://i.imgur.com/I63emp4.jpg" height="160">
</div>
<img src="https://imgur.com/0VWBThm.jpg" height="160">
</body>
</html>
Related
Sorry if my question is trivial, I am a beginner and am not quite sure how to approach this problem.
I am writing a blog that has a MENU bar at the top of the page. Since I don't want to update all menus on every html page, I wish to source the containing my menu from a different html page.
I have tried using an iframe or frameset, but those will unfortunately cut my dropdown menu off at the bottom. This means I either have to remove those or make a frame so large that it is large enough for the dropdowns, but that will squish the rest of the page down. Also, if I clicked any of the menu options, the page that would be updated would be the frame itself :|.
I was therefore wondering if it is possible to call a small portion of pre-existing code into an html file? I have also tried the .load() function of JQuery, but even simple tutorials don't seem to work for me.
Does anyone know a way to either import the div into an html file, or a way to get my .load() function to work? I have added the .load() tutorial I used below.
PAGE THAT CONTAINS THE DIV
<html>
<head>
</head>
<body>
<p>This is demo text.<p>
</body>
</html>
PAGE THAT RECEIVES THE DIV
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("new.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Build the menu as a PHP file, then pull it in using an include function:
<?php include("/yourMenu.php"); ?>
It's that simple. Changing /yourMenu.php will change it on every page. Hope that helps!
I have an external script which I have included onto my website through a <script> tag. This external script injects a set of html into where that <script> tag is placed.
For instance, if I had that script that in #div1, the injected set of code will be appended directly into #div1.
<div id="div1">
<script src="http://url/to/script.js></script>
//injected html will appear in the dom here
</div>
<div id="preferredTarget">
</div>
However, I may prefer having my script tag in the head of the page.
<head>
<script src="http://url/to/script.js></script>
</head>
<div id="div1"></div>
<div id="preferredTarget">
//i want my injected html to appear here
</div>
Also, sometimes, if my target div was created at runtime, the external script cannot find that target div at the time it was loaded because the target div may not be ready yet.
Are there any methods in controlling the placeholder where an external script would inject its content into?
I followed all steps on the Lightbox website. But whenever I click on the image it just opens up in a new page.
<head>
<link href="path/to/lightbox.css" rel="stylesheet">
</head>
I dont have jquery so I used lightbox-plus-jquery.js.
Also here is the code for displaying the image.
<script src="path/to/lightbox-plus-jquery.js" type="text/javascript"> </script>
</body>
<img src="images/pics04.jpg" width="250" height="200" alt="">
Plus how do I display text when the image is clicked?
Thanks
I had the same issue. I did not follow the directions completely. It says to place the script tag linking to the lightbox at the bottom of the page just above the body tag. I put mine in the head with the rest and it did not work. Moving the script tag for the lightbox down to the bottom just above the closing body tag should solve your problem.
You need to replace the 'path/to' bit in the code with your actual path (i.e. location of the file)
Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.
I currently am working on a large site with many different issues to contend with. One being that I have no easy way to include a script into my <head> without manually doing it for 500+ pages.
I have the possibility to include jQuery.min just inside the <body> tag from an include located there.
My question is, aside it not being a standard implementation, would there be any negative effects from not loading jQuery within the <head> tag? Will all the functions be available?
I am aware that if I do this, I will not be able to call jQuery from within the <head> or before this include... that's okay.
example:
<head>
Standard Head Stuff
</head>
<body>
<div>Some Content</div>
<!-- My Include is roughly here -->
<script type="text/javascript" src="jquery.min.js"></script>
<div>More content</div>
<script type="text/javascript">
$(document).ready(function(){
// Put my jQuery commands here
});
</script>
</body>
The only issue is that a page is loaded from top to bottom and so if you were to place the include statement into the header than you would be assured that the library would be loaded immediately. Otherwise the library may only be loaded at a later time which can cause a delay in some effects potentially.
Head or body, inline code will execute when phrased. Code is generally placed in the head so external libraries can be loaded before the page is (so effects can be run on dom ready). Code in the body will be run once the dom is done with the header code, and done loading page elements (once in the body, elements are loaded from top to bottom). So any code in the body will be executed once the page had loaded (up to that point)