Am Sure this question has been asked many times, but i need to do the following
<script language="javascript">
var one = 888;
var two = 122;
var three = "ABC";
</script>
I need to send those and return the data in a DIV (it will be an image)
I dont wont to use jQUERY or any other plugin
http://www.example.com/yes?one=888&two=122&three=ABC
I am not sure exactly what you are trying to do. This will set the src of an image to what you asked for and add it to the div.
img = new Image();
img.src = 'http://www.example.com/yes?one=' + one + '&two=' + two + '&three=' + three;
document.querySelectorAll('#idOfDiv').appendChild(img)
jQuery make it simple, but if you want you can do it in pure JS. Read official w3c ajax tutorial:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
http://www.w3schools.com/ajax/ajax_xmlhttprequest_response.asp
Related
Hi I am adding a iframe dynamically, It displays an image from a server. I need to disable the context menu for this item. In chrome I can inspect element and if I add oncontextmenu="return false" I do get the wanted affect. However I am unable to do this while the page is generated. Here is an example of the working html.
However I can not reproduce this when i frame is being created. Here is my code.
$(window).scrollTop(0);
$('#secVerify').show();
$("#popWaitLoad").modal("hide");
imgLoading.hide();
dvIframe.empty();
//else load deposit data into interface
$("#spanType").text(deposit.DepositType);
$("#spanReference").text(deposit.Reference);
$("#spanAmount").text("R " + deposit.Amount.toFixed(2));
$("#spanDate").text(deposit.DateCreatedOffsetS);
imageID = deposit.Deposit_Doc_imageID;
var url = imageUrl + '/' + deposit.Deposit_Doc_imageID + '/false';
var imgFrame = document.createElement("iframe");
imgFrame.src = url;
imgFrame.frameBorder = '0';
imgFrame.scrolling = 'no';
imgFrame.width = '100%';
imgFrame.height = '100%';
imgFrame.align = 'middle';
imgFrame.id = "iframeImg";
dvIframe.append(imgFrame);
I have tried examples like.
$("#iframeImage").contents().find("img").attr("oncontextmenu", 'return false');
$('#iframeImage img').on('contextmenu', function (e) {
e.stopPropagation();
// Your code.
return false;
});
But because the img element seems to be only created is done after page load it seems to not work. I know disabling the the menu will not help much and I have explained all the other methods of obtaining the image that is still available but the client really wants this.
I have added nocontextmenu to the body tag and it works everywhere except for the iframe.
So let me clarify, My iframe is working like it should however I would like to disable the right click aka context menu on the specific iframe.
I have used setAttribute to set the attributes and targeted a container to appendChild.
function example(){
var target = document.getElementById('container');
var element = document.createElement('img');
element.setAttribute('src', 'http://gopalshenoy.files.wordpress.com/2011/04/product_demos.jpg');
//element.setAttribute('width','100%');
//element.setAttribute('height','100%');
element.setAttribute('id','iframeImage');
element.setAttribute("oncontextmenu","return false;");
target.appendChild(element);
}
// Demo-Snippet use.
window.onload=example;
<!-- Demo Snippet use -->
<div id="container"></div>
If you build more than one element using this function you might find further issues due to duplicated ID's.
ID's are used to target a specific element 'one of' so if you want to build multiple elements I would recommend giving them unique ID's.
I hope this helps. Happy coding!
I'm trying to get an image to display in a div depending on the URL of the page. This div is in an include file that gets used for all pages of the website. What I want is if it's the homepage (with or without index.php), is for the div to show the image. What I've pieced together so far is:
<script type="text/javascript">
var d = location.href
if (d="website.com" || "website.com/index.php")
{
<img src="/images/DSLogo2.jpg" />;
}
</script>
I'm not sure if this is correct, or even the best way to go about it. Any help is very greatly appreciated, as I am still learning more and more each day.
Try:
<script type="text/javascript">
var d = window.location.href
if (d="website.com" || "website.com/index.php")
{
document.write('<img src="/images/DSLogo2.jpg" />');
}
</script>
Do not confuse = and == operator. The correct way how to code the condition is
if (d=="website.com" || d=="website.com/index.php")
Javascript is not a preprocessor, you can't usi it to create the code like in PHP. If you want to add element, you have to work with DOM:
<div id="target"></div>
<script>
var d = location.href;
var target = document.getElementById("target");
if (d=="website.com" || d=="website.com/index.php") {
target.innerHTML = '<img src="/images/DSLogo2.jpg"/>';
}
</script>
JavaScript doesn't work that way. You could use document.write with logic like that but something like this would be better:
if (your logic here) {
var image = document.getElementById('my_image');
image.src = 'some_image.jpg';
}
Notice that assumes you'll have a unique id on your image element. You'll want to put this logic in the document ready event or window on load.
I am trying to display an image using purely javascript. I have found various examples that work using html and javascript, but no pure javascript solution. Here is the non working code I have right now,
<script type="text/javascript">
if(document.images)
(new Image()).src="http://www.example.com/image.png";
</script>
var img = new Image();
img.src = "http://www.example.com/image.png";
document.body.appendChild(img); //Make sure you put the element in the DOM, otherwise it won't be visible.
I hope somebody could help me out with this.
I'm working on a portfolio website that currently looks like this:
http://cargocollective.com/shap
As you can see, I have a png image over 15 animated gif thumbnails.
Basically, I want to have some short gif animations popping into some of the screens from a time to time, so what i'm trying to do is to have a script that replaces some of the gifs with others, either randomly OR after a certain amount of time.
I hope that someone can understand what i mean and help me.
__________ *UPDATE*:
Thanks a lot, I really appreciate the help. I'm sorry for the lack of knowladge I have, making it hard for me to use what you just wrote there, but this is what I added to my source code:
<script type="text/javascript">
$(document).ready(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
else
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
setTimeout(changer,time);
}
</script>
I just copied the URL of 2 of my gif thumbnails and added them to the script, is that absolutely wrong?
Maybe the fact that I'm using the cargocollective system makes things complicated.
Here is what it looks like right now, as you can see, something IS happening, but I can't really control it:
http://cargocollective.com/shap
(after a minute the png overlay is gone for whatever reason)
best,
s
Tube televisions! How wonderfully quaint. ;-)
Well, here's something I tossed together. Obviously you should change the actual image SRCs into something that exists on your server.
http://jsfiddle.net/9KrsV/1/
$(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="images/chalk-dotted.png")
$img.attr("src","images/chalk-box.png");
else
$img.attr("src","images/chalk-dotted.png");
setTimeout(changer,time);
}
UPDATE: Obviously, this is pretty narrow. Here's another script that will store the old SRC and eventually flip back to it:
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "noisy_static.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
}
I am working on a clients website and want the background images on the "cruise_offers" div to change, possibly only 3 - 4 images in rotation.
My jquery knowledge is quite basic so any help would be great.
I would prefer it to work with jQuery as I am using it elsewhere on the site.
My markup:
<div class="cruise_offers">
<span class="overlay_bar">
View our Great Cruise Offers
</span>
</div>
Cheers
Rory
Check out this link - I worked on something similar and it may help:
I found a jquery image rotatation script and adding hyperlinks to the images breaks the animation
$(div.cruise_offers).removeClass('cruise_offers');
$(div.cruise_offers).addClass('cruise_offers1');
create classes in your css with different background images.
Maybe something like this would work (I haven't tested it).
var current_image = 0;
var rotation_speed = 5000; //milliseconds
var where = $("div.cruise_offers");
var images = new Array();
images[0] = 'img1.jpg';
images[1] = 'img2.jpg';
function change_image() {
current_image++;
if (images[current_image].length == 0) {
current_image = 0;
}
$(where).css("background-image", "url("+images[current_image]+")")
}
if (where.length != 0) {
setTimeout("change_image()", rotation_speed);
}
Check out the Cycle plugin and visit the demos at the bottom of the page to get started.