When my main page loads, it grabs the first entry with the id="vids" from videos.html.
Main Page:
<div id="sidevideos" class="sidevideos">
<script>
$('#sidevideos').load('videos.html .vids:lt(1)');
</script>
</div>
That works great, no problem.
I would like to be able to pass the video link( .vids) to this function on the main page
<script>
var $v = jQuery.noConflict();
$v(document).ready(function() {
$v('#vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
});
</script>
Which would open the youtube video in an iframe.
Video.html Code:
<div class="videos">
<a id='vids' href="youtubevideo"><img src="img/videos/housing.png" border="0" class="sidevids">
<p class="sidevidtext">vid description</p></a>
<a id='vids' href="youtubevideo"><img src="img/videos/housing.png" border="0" class="sidevids">
<p class="sidevidtext">vid description</p></a>
</div>
There are two problems
id should be unique in a document, means you cannot have two elements with the same id vids
You need to call the colorbox after the videos.html is loaded, for that you can use the load complete callback
Try
$('#sidevideos').load('videos.html .eq(0)', function(){
$v('#vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
});
Im not sure if this is what you wanted but you could store the link into a variable like this var link = $('#vids').attr('href'); and then use the var to load in your main page
SEE FIDDLE
Related
I have a script named as view.js which does is counts the number of times a single div box is viewed on the page..... I have that mechanism well working when I load that script into only one div ...... but when I put that inside multiple divs inside single page it only works for the last script......
I know that js are loaded sequentially on a page ie only my last loaded scipt is suppose to work
can anyone tell me a way so that when I load my js multiple times inside different div they act as different scripts and run in parallel for count
and I also want to mention that the variable names will remain same for every script and I just want to use them differently for other scripts
also is there any solution using the js object...
please let me know of the solution
<div id="parentofad" >
<div id="ad">
<img src="gemma-correll-cool-beans-button-magnet-lg.jpg" width="100" height="100">
</div>
<script type="text/javascript" src="adTagScript.js"></script>
</div>
<div id="parentofsecondad" >
<div id="ad">
<img src="gemma-correll-cool-beans-button-magnet-lg.jpg" width="100" height="100">
</div>
<script type="text/javascript" src="adTagScript.js"></script>
</div>
Edited: jsfiddle snippet https://jsfiddle.net/1fxgwztk/
Right now i guess you have a function that you call on page load for a specific class or id. What you must do is to initial that function for every class like this example
//Class
function Viewed(divID) { }
var div = new Viewed(divID);
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
my concept is to load html file from one to another one. The image below could explain better.For example, I have no1.html, no2.html,no3.html, no4.html ... and they share one JavaScript file, all html files have its own contents.
first HTML file no1.html loads no2.html, my javascript is for no1.html like, $('#element').load('no2.html #content'); then no2.html js is like $('#element').load('no3.html #content');
if all files just share one javascript file is unable to load html pages continuously, is there a way to make html loads another html continuously ?
I guess what you would like to do is something like this:
my.js
$(function() {
// delegate click event to ajax content
$("body").on("click",".load_button",function() {
$(this).hide(); // hide this button
var area_name = $(this).data("area");
var next_file = $(this).data("next");
$("#"+area_name).load(next_file);
});
});
no1.html
<script src="my.js"></script>
This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>
no2.html
This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>
no3.html
This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>
In this example, my.js is included only once in no1.html.
Hope this helps.
1.You are trying to load the content of the html file in single element.
You might want to use a callback function
$('#element').load('no3.html #content' ,function(){
// Loading done.. what next?
})
I am trying to add a Tripadvisor widget (rave) to my page which is loaded via Ajax.
Here is the widget code:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>
Only when the page loads the first time it's get rendered. But after an ajax load it doesn't.
I tried to use jQuery's getScript function but it doesn't help. Even manually deleting the added script en link nodes from the head before executing the script again doesn't help.
Can anyone help me fixing this please?
The solution:
$.getScript('//www.tripadvisor.fr/WidgetEmbed-selfserveprop?nreviews=6&uniq=&iswide=true&locationId=' + tid + '&rating=true&popIdx=true&border=false&writereviewlink=true&lang=fr', function() {
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});
Perhaps the html iframe is a method.
ex.
<iframe src="tripadvisor.php" scrolling="no" frameborder="0"></iframe>
tripadvisor.php
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsscrollingravewide&uniq=869&locationId=946177&lang=en_US&border=true&shadow=true&backgroundColor=white"></script>
A far from optimal solution which I had to adopt in a similar scenario was based on the following logic:
Invoke the tripavisor script just once and load the widget inside an hidden html element on whathever page the user lands (so the page is not rendered by an ajax request).
When the page where you want the widget placed is called by ajax, if the request is successfully completed, check if the widget is already in DOM, clone it and inject or append it to the ajax generated piece of html.
I found another solution. If you have the widget HTML on the page, or if you added it via jQuery to the page, e.g. this one:
<div id="TA_cdsscrollingravewide869" class="TA_cdsscrollingravewide">
<ul id="1NcDZBZ" class="TA_links 8dTZRew">
<li id="ZweVlS" class="3cqMCWiB">Read 37 reviews of <a target="_blank" href="http://www.tripadvisor.com/Restaurant_Review-g188590-d946177-Reviews-Bond-Amsterdam_North_Holland_Province.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Bond</a></li>
</ul>
</div>
you can execute this script below, and it will load the widget:
$.getScript("https://www.tripadvisor.com/WidgetEmbed-cdsscrollingravewide", function(){
if (typeof(window.taValidate) != 'undefined') {
window.taValidate();
}
});
Please note that for example in my case the widget class is TA_cdsratingsonlynarrow, so
for me the script URL looks like this:
https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow
I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/