I'm trying to change the SRC of an iFrame using a URL retreived by AJAX from my backend database. I need the maps to change on click of a button.
The error showing inside the iFrame is " 404. That’s an error.
The requested URL //embed was not found on this server. That’s all we know." Which makes me think the SRC isn't being changed properly.
Any help on this would be great!
Heres my setup:
<iframe id="HTMLGmapsSRC" src="" width="300" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
var artgmaps = (imagesgmaps[index].replace(/\"/g, ""));
$('#HTMLGmapsSRC').attr('src', artgmaps);
The JSON response has added backslashes however i've read this is normal?
I Used this method for the embed data in iframe.
$location = "Address which is get from the data base".
<div id="show_map" style="display:block;">
<address class="row"><?php echo $location;?></address>
</div>
and use address tag for show map
$("address").each(function(){
var embed ="<iframe width='100%' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed'></iframe>";
$(this).html(embed);
});
Related
eBay auction with the following code:
<iframe width="1416" height="3384" frameborder="0" id="desc_ifr" src="http://adomain.com/mainframe">
<h1>the content</h1>other content
<iframe src="http://another_domain.com/frame.php">
</iframe>
</iframe>
Through the frame.php content, I would like to go back to the parent frame with id desc_ifr for find keywords inside the H1 tags and do something when found.
Thanks.
Here is my problem, I had describe in code project. When I am clicking in an icon it try to open in new page for showing image or pdf or video. But, I don't like this. I like to show that files in my iframe in same page. How can I do this ?
My code project link is:
Please don't open in new page. Just stay in same page.
I could suggest using a plugin as it makes things easier.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Alternatively what you want is to change the iframe src.
Using jQuery, you could for example, do something like this
<iframe id="myframe" style="display:none" width="630" height="420"></iframe>
<div class="fileIcon">
<a class="click" onClick="" rel="gallery" href="#">
<img src="src" title="" width='100' height='100' alt="" />
</a>
</div>
And JS
$('a').click(function(e){
e.preventDefault()
var s = $(this).find('img').attr('src');
$('#myframe').attr('src', s).show();
});
FIDDLE
This will get the image src and more it to the iframe
Give your iframe a name="myframe" then in your target you would use target="myframe"
Good day guys, I'm trying to learn codeigniter and I'm having a trouble displaying a php file in an iframe. Here's my code. It returns "404 Page not found"
here's my view:
<iframe class="tabContent" name="myIframe" src="<?php echo site_url('pages/view_about');? >" marginheight="8" marginwidth="8"></iframe>
then here's my controller:
function view_about(){
$this->load->view('pages/about');
}
here's how my folders are arranged
application->views->pages->about.php
application->contollers->pages.php
I would just like to add, the code I pasted above for my view is located in
application->views->templates->footer.php
the iframe is actually a part of my footer thanks
php ending tag has space between
try this..
<iframe class="tabContent" name="myIframe" src="<?php echo site_url('pages/view_about'); ?>" marginheight="8" marginwidth="8"></iframe>
Hi can you please try below code hope it will work for you.
Page 1
<iframe id="targetFrame" src="" width="100%" height="100%" scrolling="NO" frameborder="0" ></iframe>
This is my first question, hence please ignore mistakes, if any.
I have an issue where I am serving three alternate layouts to my visitors based on the device they are surfing from.
Mobile, Tablet, and Desktop.
My website is in PHP and I am using just 280 bytes of JavaScript to determine the browser width of my visitor. There is no other JavaScript or any libraries like jQuery, MooTools. I want to keep my site very very light weight thus resulting in faster page load speeds.
I have a PHP variable called $layout and the the value to it is assigned by the JavaScript dynamically based on the browser width. The three values assigned to it are mobile or tablet or desktop
Now I have links in my xhtml which are like this:
<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
By default images are loading from the cdn/images/desktop folder.
What I am looking for is if the value is $layout is tablet then the images should load from cdn/images/tablet folder and similarly if the valur of $layout is mobile then images should load from cdn/images/mobile folder.
Name of the images remain the same. They are three different resolutions in three different folders.
Kindly suggest a PHP solution if possible to do this in PHP.
Otherwise please suggest a plain JavaScript solution (No libraries like jQuery, MooTools ot any such)
Thanks
UPDATE
Actually I am using Joomla as a CMS so in my posts I cannot use PHP code within posts hence I want that after the page is rendered or during the rendering these paths must change.
$(function(){
//mobile or tablet or desktop
var client='<?php echo $layout; ?>'
if(client=='desktop'){
//do nothing
}else if(client=='tablet'){
$('#image-list img').each(function(){
$('this').attr('src',$(this).attr('src').replace('desktop','tablet'));
});
}else{
//mobile
$('#image-list img').each(function(){
$('this').attr('src',$(this).attr('src').replace('desktop','mobile'));
});
}
});
<div id="image-list">
<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
</div>
use jQuery
sorry i didn't know it don't require lib.
var client='<?php echo $layout; ?>'
var list=document.getElementById('image-list');
var img=list.getElementsByTagName('img');
for(var i=0;i<img.length;i++){
//img[i].src=img[i].src.replace('desktop',client);
img[i].setAttribute('src',img[i].getAttribute('src-data').replace('desktop',client));
}
put it in the end of file.
<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
Try this:
<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">
why don't you use simple javascript to change the src of the image ?
it's maybe not the most nicely looked script but you can do something like this:
xhtml file :
<img id="image1" src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img id="image2" src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img id="image3" src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
after the javascript find out which layout is it just do:
document.getElementById("image1").src = "cdn/images/" + layout + "/image1.jpg";
document.getElementById("image2").src = "cdn/images/" + layout + "/image2.jpg";
document.getElementById("image3").src = "cdn/images/" + layout + "/image3.jpg";
is that what you mean ?
Frankly, I'm not sure what I'm doing wrong. This is my code, but for some reason, the map is outputting a blank iFrame with a source URL that if I click will send me to the proper map, so the URL is being input correctly, but it's not actually being displayed on my website.
<?php $addressStr ="516 East Liberty Street, Ann Arbor, MI 48104"; ?>
<iframe width="206" height="175" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php echo "http://maps.googleapis.com/maps/api/staticmap?center={$addressStr}&zoom=15&size=204x173&markers=color:orange|{$addressStr}&sensor=true&output=embed"; ?>"></iframe>
It's not an iframe. You need a standard <img> tag ?