i have a remote php file located on a server
https://webserver.com/file.php
and i have several images in html file on another server that are linked through
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
i want to replace the main link with a variable and add it to my images.
should appear link the following:
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
and the final link of the image will be:
https://webserver.com/file.php?type=1
Anyone can help please?
the html code is as follows:
<html>
<head> </head>
<?php
var $variable = "https://webserver.com/file.php";
?>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>
It's PHP, not Javascript question. You try something like this?
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0"></br>
logo
</div>
EDIT:
complete example:
<?php
$variable = "https://webserver.com/file.php";
?>
<html>
<head> </head>
<body>
<div class="apps">
<img src="https://anysite.com/image.jpeg" alt="image" border="0">
logo
</div>
<div class="apps">
<img src="https://anysite.com/image2.jpeg" alt="image2" border="0">
logo
</div>
</body>
</html>
Related
So I have my codes here and what I want to do is center it but can't figure out how.
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
Here is what my code is JS fiddle looks like as is...
https://jsfiddle.net/4fc07vL7/
Maybe you want to something like this :
<div style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
Try this
.container{
position:relative;
float:left;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
left:50%;
}
<div class="container">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
The align attribute is not supported in HTML5. So, Use CSS instead.
CSS syntax: <div style="text-align:center">
So, you can do this.
<div id="links" style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/twitter.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
I have a hidden div (by using max-height and transition) that show up when I click a button. This div contains several images that load up when you first load the site. I would like them to load when I click the button to show the div, to make the site lighter.
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>
I would suggest using an attribute on the img tags to store the intended src attribute, then apply it on the button click. This would avoid having to maintain a list of src urls in your JavaScript.
function show() {
document.getElementById('id1').style.maxHeight = "200px";
var images = document.querySelectorAll("#id1 img");
for(var i = 0; i < images.length; i++)
{
images[i].src = images[i].getAttribute('data-src');
}
}
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
</div>
<hr>
Here's the working fiddle https://jsfiddle.net/6ve7ub79/
You can do it easily using jQuery
jQuery
$(document).ready(function(){
$('button').bind('click', function(){
$('.i1').attr('src', 'img1.jpg');
$('.i2').attr('src', 'img2.jpg');
$('.i3').attr('src', 'img3.jpg');
$('.i4').attr('src', 'img4.jpg');
});
});
HTML
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img class="i1" src="" alt="">
<img class="i2" src="" alt="">
<img class="i3" src="" alt="">
<img class="i4" src="" alt="">
</div>
<hr>
CSS
.class1 {
transition:max-height 1s;
}
try this code
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').innerHTML= '<img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""><img src="img4.jpg" alt="">';
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
</div>
<hr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>
can you tell me how to fix it on this code exactly? here I have two internal codes and two external (to youtube)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LS_model</title>
<link href="ls.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Image1" style="position:absolute;left:62px;top:291px;width:876px;height:524px;z-index:0;">
<img src="images/Background.png" id="Image1" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:75px;top:31px;width:840px;height:260px;z-index:1;">
<img src="images/ads.gif" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:126px;top:343px;width:140px;height:57px;z-index:2;">
<img src="images/videoss-b.gif" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:723px;top:344px;width:140px;height:56px;z-index:3;">
<img src="images/Photos-b.gif" id="Image4" alt=""></div>
</div>
</body>
</html>
Try this
Use window.open to open two pages and remove return false from your code.
<img src="images/Photos-b.gif" id="Image4" alt="">
For opening in a new tab, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY', '_blank');
And for opening internal, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY');
I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)
You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor
div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>
How do I prevent the default behaviour of jquery stripping out my JS?
function callBackFunctionLoadPage(data)
{
var data = $(data).find('#content');
alert($(data).html());
$("#content").html(data);
$("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#page").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadPage);
}
In my code I want the tags but jquery strips them out:
Original code:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
But From jquery:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
EDIT
Here is my actual html page that's getting loaded
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kannada on campus</title>
<meta name="keywords" content="" />
<link rel="icon" href="images/icon.jpg"/>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<div id="box"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /> <img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /> <img src="images/Facebook Product Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /> <img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" />
<!--end box-->
</div>
<body>
<!-- start header -->
<div id="header">
<div id="search"></div>
</div>
<div id="logo">
<h1>Kannada on campus</h1><br /><br />
<h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<div id="menu">
<ul>
<li>Home</li>
<li>Events</li>
<li>Photos</li>
<li>About</li>
<li>Contact Us</li>
<li>ಕನ್ನಡ</li>
</ul>
</div> <!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Register you event</h2>
Tell us if you are conducting any kannada event and we will update it to our audience!
</li>
<li>
<h2>Subscription</h2>
<form id="form1" method="post" action="other_files/add_mailing_list.php">
<label>
Subscribe to our mailing list:
<input type="text" name="sub-email" id="sub-email" />
<input type="submit" name="submit" id="submit" value=" Add " />
<input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />
</label>
</form>
<h2>Current Events</h2>
<ul>
</ul>
<h2>archives</h2>
<ul>
<li>test</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2011 All Rights Reserved. • Designed by Ajitah | humans.txt</p>
</div>
<!-- end footer --></body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23549810-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
I suggest you do things differently. Firstly, ajax calls are good because they're lightweight, so instead of loading a whole page, you can just grab the updated data and inject it where necessary. If you're getting a giant set of markup including scripts you're essentially using ajax to do a normal http page request. That's like looking at the fast line in the supermarket (10 items or less) and seeing it move faster than the isle you're currently standing in, so you move there. But if you do that for every request, you end up turning the fast lane into a normal lane.
Getting javascript code from the server to execute is usually a sign that you're not thinking correctly about the problem, since your mixing domains horribly.
Firstly, why not just have a function that executes every time you ajax the next page/gallery in? Why do you need to get the code from the server? In accordance with my first point, why not just get an array of new filenames and build the new gallery from those?
If for some reason you feel you want to continue this way anyway (I should point out at this point that executing code in such a manner is not just bad practise but unsafe in certain circumstances), you can extract the code and eval it:
Assuming there's only one block of code, and it's wrapped in <script></script> (which is not taking into account all sorts of whitespace and funny characters):
function callBackFunctionLoadPage(data)
{
...
eval(data.match(/<script>(.*)<\/script>/im)[1]);
}
UPDATE
jquery strips out the javascript but it still executes it:
$('#content').html('<div><script>alert("hello, world!");</script></div>');
So there is almost no reason to want the script tags themselves if their content is already executed...
UPDATE 2 (for non-believers)
var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
Have you tried using JS's native innerHTML ?
$("#content").get(0).innerHTML = data;
If this works, as davin pointed out, you still have to evaluate the scripts:
eval(data.match(/<script>(.*)<\/script>/im)[1]);
Loading and evaluating SCRIPT form AJAX should work in general.