My Google maps code is all squared away and valid, but it doesn't load on the page. Here is the page in question, I have full availability to code, not sure why it's breaking:
http://whs.rjuhsd.us/calendar/map
The Gmaps JS is in the header, with the correct key. Sensor is set to true, and the element is defined in the document, displayed properly, in the right spot and available to the user.
Halp?
Looks like you have conflict between jQuery and Prototype.
Use the noConflict mode of jQuery.
PS: Why are you using both?
Chetan is right, you are running into a conflict between jquery and Prototype. I see that you have called jquery.noConflict() once, but then after that you import jquery again into your document, thus undoing the noConflict:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
... snip ...
<!-- following scripts are for the jwPlayer installations oct.09 -->
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jwplaylist/jquery-1.3.2.min.js">
</script>
Is there any reason why you didn't just update the swfobject.js to use the earlier version of jquery?
I see two links to google maps, but I assume you want to display a google map as part of this page right?
There's an empty DIV on your page:
<div id="map_canvas" style="width: 500px; height: 300px;"></div>
Maybe this is where you intended to embed the map? If so, you can try to replace it with the following:
<div id="map_canvas" style="width: 500px; height: 300px;"><iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&sll=37.0625,-95.677068&sspn=41.767874,58.535156&safe=on&ie=UTF8&t=h&hq=&hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&ll=38.764056,-121.330884&spn=0.015209,0.020106&z=16&output=embed"></iframe><br /><small>View Larger Map</small></div>
Related
I have a page which has an iframe element inside it. This iFrame contains two levels of document inside it.
Here is the short version of code (removed most of stuff as otherwise it would be too big)
<iframe src="some soruce" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<iframe id="player" src="some source" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<div id="mediaplayer_wrapper" style="position: relative; width: 863px; height: 486px;">
<object type="application/x-shockwave-flash" data="/new-flash-player/player.swf" width="100%" height="100%" id="mediaplayer" name="mediaplayer" tabindex="0"></div></div>
<div id="banners_area" style="position: absolute; top: 0px; left: 0px; width: 863px; height: 486px; display: none; background-color: white;">
<br>
</div>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
What I am trying to do, is to access via jQuery the mediaplayer object and trigger a function on it. I have tried the following:
var p = jQuery("mediaplayer");
p.hideGate();
and also
var p = $("#iFrame").contents().find("#mediaplayer");
p.hideGate();
but none of them have worked. (gave me an error that hideGate is not defined. However when under developer I switch myself to the content of that particular player, and execute the very first code, it suddenly works.
What am I doing wrong here? How come I cannot trigger the function?
hideGate is not a standard jQuery method. It must be provided by a plugin.
You have multiple documents, and that plugin is loaded into the version of jQuery that is in the framed document with the #mediaplayer element in it.
When you call jQuery from the parent frame, you are using the version of jQuery there … which doesn't have the plugin installed.
You can probably solve this by loading the plugin script into the document in the parent frame.
Failing that, you would need to call the jQuery function from the document in the frame. (Possibly $("#iFrame")[0].contentWindow.jQuery("#mediaplayer") would do that, but I don't have time to write a test case to be sure right now).
Perhaps you want to try the .contentWindow property as shown in: http://www.w3schools.com/jsref/prop_frame_contentwindow.asp
Hope it helps.
I have a script obtained from our Sharp dealership to display machines on our website. When I add it twice with a different model (data-name) it only runs the first and drops off the image after it flashes on the page. I did try changing the div id of the second but it did not work.
Sample 1:
<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>
Sample 2:
<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3070N'></script>
<div id='sharp-widget'></div>
Based on the source code you used above, you can't, at least not without some kind of workaround.
The javascript you used expect explicitly a item with id "sharp-widget", but HTML doesn't validate repeated ids, so jQuery wont render it.
My suggestion would be to contact the provider of script to let you pass the id as a parameter or, if it's not possible, do some workaround like adding an iframe to the second one, something like:
<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>
<iframe src="./inc.html" style="width: 100%; border: none">
</iframe>
And inc.html
<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>
I have a below code in my iframe and it contain some jQuery and I want to call it from the iframe to parent page but it not working and path of the iframe is the content/test/doubleimg.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/base64.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/doubleimg.js"></script>
And double img contain some jQuery function which is execute onload of the page and it work fine but if i put it in iframe its not working.
And my html markup like and path of the parent file is template/category.html
<div id="Container">
-----------
-----------
<div class="Content" id="LayoutColumn2">
<iframe id="theiframe" allowtransparency="true" target="_top" src="/content/test/doubleimg.html" frameborder="0" height="0" width="0"></iframe>
</div>
</div>
So please suggest me the idea how can I use jQuery from the iframe and my jQuery is execute on the page load.
Actually I am trying to call api of the Bigcommerce but for that I need to set https and I can't set it because it not allowed in the Bigcommerce to set https in category page url
And if I am not set https then the API returns a 401 authentication error
So please help me out from this.
Something like this, if documents are in the same domain:
var iframe = document.getElementsByTagName('iframe')[0];
var jQuery = iframe.contentWindow.jQuery;
alert(jQuery);
See my jsfiddle for more information. It include other jsfiddle in iframe there I inited jQuery.
try this
window.parent.document.wirte('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>');
I'm using a plugin called Prettyphoto, when you initiate the plugin you can pass a parameter called social_tools where you can enter in html that loads Twitter and Facebook buttons.
The default html in the js file itself works no problem, I can also add in html into the js file and it works.
But when I try and add the code where I initiate the plugin it stops working.
All I end up seeing is }); }); outputted on the screen, as if something is not closing correctly somewhere.
Im working locally.
Here is my code
<script type="text/javascript" charset="utf-8">
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>'
});
});
</script>
Here you can see the list of parameters, if you scroll down to customization, at the end you will social_tools
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation
Thanks
The <script> element actually ends at the 1st use of </script>, despite its placement or usage inside a String literal.
A common trick to prevent this is to break it up:
'...</' + 'script>...'
Does this also not work?
var options = {social_tools: '<div class="twitter">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>'};
$(document).ready(function(pp_settings){
$("a[rel^='prettyPhoto']").prettyPhoto(options);
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
</div>
<script type="text/javascript">
console.log("test");
</script>
<body>
</html>
Here, I have placed the JS codes at the bottom of the page. And the result is it's eaten. If I remove the iframe element, the codes work fine. Evidently, the iframe I place here is an empty one without linking to any source. Hence, no other inline JS codes are brought in. BTW, if I put scripts in the head block, they work fine too.
I really don't know WHY? Could anybody give me some comments?
Use a validator (such as http://html5.validator.nu/ or http://validator.w3c.org). The biggest problem you have is that you're not closing the iframe with a </iframe> tag. Anything between iframe tags will only show for clients who have iframes disabled.
Final code should look like:
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
This page requires iframes... blah blah.
</iframe>
In the future, always validate when you're not 110% sure.