I have a link to an image an I would like to save it as an image.
For example the link is http://graph.facebook.com/sarfraz.anees/picture. How do I save this into an image variable in javascript so I can use it to do:
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
also would be very useful if someone can guide me on how to resize this image to a 50x50.
Here's my latest code
UPDATE:
<body id="suggestions" class="default verified ">
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({appId: '1355709392349404', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
pic = "http://graph.facebook.com/" + response.session.uid + "/picture";
} else {
window.location = "index.php"
}
});
</script>
<div class="clearfix" id="wrap">
<div id="nav">
<div class="center clearfix">
<h5>
Favor
</h5>
<ul class="icons menu clearfix">
<li>
<a title="You" href="/me">
<script type="text/javascript">
document.write("<img src=\"" + pic + "\" class=\"avatar\">");
</script>
</a>
</li>
Issue is that I can't get the pic that is on the other script
What's wrong with just:
document.write('<img src="http://graph.facebook.com/sarfraz.anees/picture" class="avatar">');
or...
var pic = 'http://graph.facebook.com/sarfraz.anees/picture';
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
?? And it's already a 50x50 image...
var pic = document.createElement('img');
pic.className = 'avatar';
pic.src = 'sourcetopicture.png';
pic.height = '50';
pic.width = '50';
document.body.appendChild(pic);
Just substitute where you'd like to append the picture. For instance, if it were a div with the id of myDiv, you could say
document.getElementById('myDiv').appendChild(pic);
Hope this helps a bit!
Related
ok here is the full code
chenging the background image css property through jquery and the images are not displaying .... checked the paths and they are ok
divs exist, css is ok , paths are ok, images exist BUT it works on the on.show function and it does not work on the click function
// when new category show default images
$('#newCategory').on('show.bs.modal', function () {
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/default.png';
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/default.png';
$( '#categoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#bannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
});
// load category info before display dialog
$('body').on('click', '.btn-upd-id',function(){
var id = $(this).attr('upd-id');
$("#update-category-id").val(id);
if( id != "" ){
$.post('category/category_info.php', {id: id}, function(data){
var obj = JSON.parse(data);
$("#upd-name").val(obj[0].name);
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/' + obj[0].category_image;
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/' + obj[0].banner_image;
$( '#updCategoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#updBannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
})
}
});
HTML
<!-- category image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category">Category Image</label>
<br/>
<div id="updCategoryPreview"></div>
<input type="file" class="img" id="upd-category" name="upd-category">
</div>
</div>
</div>
<!-- banner image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="banner">Category Banner</label>
<br>
<div id="updBannerPreview"></div>
<input type="file" class="img" id="upd-banner" name="upd-banner">
</div>
</div>
</div>
I expect it to load the image but it displays nothing.
fed up
used this piece of code and its working
image = new Image();
image.src = url;
image.onload = function () {
$('#image-holder').empty().append(image);
};
found here
Can I get the image and load via ajax into div
thank you all for your help
In my website when i click on images it opens new page using onclcik openpopup(user defined function)
my problem is google will not index onclcik urls,it only index href urls.
So i want to use use onclcik and href in anchor tag and make only onclick work.href is only for Google crawling purpose only my code is as below
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\
<div class='mdl-card-wrapper charm-inner'>\n\
<div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\
<div class='mdl-card__media'>\n\
"+locicon+" \n\
<a href="popupurl" id='myAnchor' > \n\
<div style='position:relative;'>\n\
<div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\
<div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\
</div></div></a>\n\
</div>\n\
<div class='mdl-card__title'>\n\
<div class='right-charm'>\n\
<div class='social-share'>\n\
"+copycontent+"\n\
"+watsapp+"\n\
<a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\
class='fb_share'></a>\n\
<a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\
</div>\n\
</div>\n\
<div class='icharm'>\n\
<h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\
<div class='mdl-card__subtitle-text'>"+title+"</div>\n\
<div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1){
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
// document.getElementById("main-home-page-inner").innerHTML += html;
}
/* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/
}
//addEventListener('click', function (ev) {
//ev.preventDefault();
// alert(ev.target.getAttribute("data-charmid"));
// openpopup(ev.target.getAttribute("data-url"));
// sendpym(ev.target.getAttribute("data-title"));
// });
$('myAnchor').on('click',function(ev){
ev.preventDefault();
openpopup(ev.target.getAttribute("popupurl"));
sendpym(ev.target.getAttribute("data-charmid"));
});
})
.error(function(status, statusText, responseText) {
//console.log(statusText);
//console.log(responseText);
});
Fix your code. Place the elements in quotes. Work correctly with quotes.
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id='charm_"+touch_id+"' data-charmid='"+touch_id+"' data-vis='"+bgid+"' data-vid='"+seid+"' data-vtitle='"+vtitle_url+"' data-title='"+title_url+"' style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'><div class='mdl-card-wrapper charm-inner'><div class='demo-card-wide mdl-card mdl-shadow--8dp'><div class='mdl-card__media'>"+locicon+"<a href='"+popupurl+"' id='myAnchor' ><div style='position:relative;'><div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width='32px' src='"+cf_assets+"img/hanger.png'></div><div id='imagearea_"+touch_id+"' title='"+title+"' class='imagearea loading'></div></div></a></div><div class='mdl-card__title'><div class='right-charm'><div class='social-share'>"+copycontent+""+watsapp+"<a onclick='sharetofb(\'"+ct_domain+socialshare_url+"\');' title='Facebook' id='fb"+touch_id+"' class='fb_share'></a><a onclick='sharetotwitter(\'"+ct_domain+socialshare_url+"\');' title='Twitter' id='tw"+touch_id+"' class='tw_share'></a></div></div><div class='icharm'><h2 class='mdl-card__title-text'>"+subtitle+"</h2><div class='mdl-card__subtitle-text'>"+title+"</div><div id='vid_"+touch_id+"' class='mdl-card__subtitle-videoname'>"+videoname+"</div></div></div></div></div></div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1)
{
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
}
} // WHY????
$('myAnchor').on('click',function(ev){
ev.preventDefault();
openpopup(ev.target.getAttribute("popupurl"));
sendpym(ev.target.getAttribute("data-charmid"));
See how to properly use the quotes ' and "in a variable in
w3schools.com - JavaScript
Strings
You can easily do this by returning false from the handler function at the end.
Refer to this post for more details
Also, you can use something like this if you are using JQuery:
$('a').on('click',function(e){
e.preventDefault();
// Do your other stuff.
});
In this example I am targeting your anchor tag by tagname. Add a class or ID instead.
We are currently developing a site for a client that we've been told has ie9 use but very strict on the requirements.
For this is having 4 placeholder images, when clicked on will open an iframe, and replace the iframe with a different video if clicked.
Simple enough to implement for our uses in modern browsers, the issue I'm having is the page sits and reloads in ie9 and doesn't open any of the iframes when being clicked on. (the code is pretty rough but the timeframe for this by the client was <1 hour and the other developer did it pretty much sitting next to a client in a meeting, and it works)
JS
if ( $('#videoLinksMain').length ) {
// //switch out video placeholder with video
function playVideo2(){
thevid=document.getElementById('thevideo');
thevid.style.display='block';
this.style.display='none';
}
//click
$('#videoLink1').click(function(){
console.log("clicked videoLink1");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink2').click(function(){
console.log("clicked videoLink2");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink3').click(function(){
console.log("clicked videoLink3");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink4').click(function(){
console.log("clicked videoLink4");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
//hover
$('#videoLink1').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink2').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink3').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink4').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
}//end .length
HTML
<div class="col-md-4 " id="videoLinksMain">
<div class="row">
<!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlaySml">-->
<!-- <img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1"> -->
<img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1">
</div>
<div class="row margin-top-half" id="videoLinksThumbs">
<div class="col-md-4">
<!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlayTbn">-->
<img src="images/vtLink-placeholder-1.png" class="img-responsive" id="videoLink2">
</div>
<div class="col-md-4">
<img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3">
<!-- <img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3"> -->
</div>
<div class="col-md-4">
<!-- <img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4"> -->
<img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4">
</div>
</div>
<div class="row text-center" id="videoDesc">
<p style="display:none;">This text is here to help give a textual description of each video</p>
</div>
So I am trying to make 2 slide shows of img on the same page. I have it so that one will work, but can not get the second on to work. Please help. If you need I can post the CSS for the whole thing as well. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colorado Marauders</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script language="JavaScript">
function mdy(todaysdate)
{
return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() + "/" + todaysdate.getFullYear();
};
mdy(new Date());
function slide(id, intval, total) {
var image = document.getElementById(id),
imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg";
return window.setInterval(function() {
if (++imgcount > total) imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg";
}, intval);
}
window.onload = function()
{
var slider1 = slide('img', 3000, 8);
var slider2 = slide('c1', 4000, 22);
};
</script>
</head>
<body >
<header>
<div class="title">
<h1>Colorado Marauders Disk Golf</h1>
</div>
<h3 class="event" style="text-align:center;">Events</h3>
</header>
<section>
<div class="content"></div>
<div><img src="image/main.jpg" style= "width:33em; height:auto; margin-right: .1em;
margin-top: 1.9; border-color:white; border-style:solid; border-radius:50%; border-
width:.1em; float:left; height:auto; box-shadow: .6em .6em .6em red;"></img></div >
<div class="top">
<div id="container" >
<img id="img" src="image/img1.jpg" />
<h1 style="text-align:center;">Check out the pictures from our last event.</h1>
</div>
</div >
</section>
<section>
<table>
<tr>
<h3 class="Tmain">
Top 10 Tag holders
<div class="tag">
<ol>
<li style="color: white;">Shawn Gould</li>
<li style="color: white;">Josh Cain</li>
<li style="color: white;">Adrian Meyer</li>
<li style="color: white;">John Allen</li>
<li style="color: white;">Mike Brown</li>
<li style="color: white;">Marcus Moreno</li>
<li style="color: white;">Cameron Palen</li>
<li style="color: white;">Tyler Moffitt</li>
<li style="color: white;">Raymond Lewis</li>
<li style="color: white;">Connor Madsen</li>
</ol>
</div>
<h3 class="Bmain">
Other stuff for the group
</h1>
</h1>
</tr>
<tr>
<h1 class="Tmain2">
</h1>
<h1 class="Bmain2">
news
</h1>
</tr>
<tr>
<h4 class="Tmain3">
<div>
<a href = "mailto:coloradomaraudersdiskgolf#gmail.com?subject=Request to
join"/><img
style="height:21.3em; width:33.1em;" src="image/c1.jpg"/>
</div>
</h4>
<h1 class="Bmain3">
<div style="text-align:center;">
Here are some other link that you might like.
</div>
<div class="fb">
Like us on <a href="https://www.facebook.com/pages/Colorado-Marauders
/297312640455928?skip_nax_wizard=true&ref_type=logout_gear" target="_blank"><img
src="image/facebook.jpg"/></a>
</div>
<div class="fb1">
<img src="image/discraft.jpg"/>
</div>
<div class="fb2">
<img src="image/dg.jpg"/>
</div>
<div class="fb3">
<a href="http://www.innovadiscs.com/" target="_blank"><img src="image/innova.jpg"
/></a>
</div>
<div class="fb4">
<a href="http://www.vibramdiscgolf.com/" target="_blank"><img
src="image/vibram.jpg"
/></a>
</div>
<div class="fb5">
<img src="image/mvp.jpg"/>
</div>
<div class="fb6">
<img src="image/pdga.jpg"/>
</div>
</h1>
</tr>
</table>
</section>
<footer>
<h3>
Colorado Marauders
<date><script language="JavaScript">
sampleDate1=new Date()
document.write (mdy(sampleDate1))
</script></date>
</h3>
</body>
</html>
You should have had a look on your console!
1) First error is TypeError: slideA is not defined because it's defined inside the setInterval.
2) Don't declare multiple functions with same name!
3) There's no need to define slideA multiple times. Once defined you can call it as often as you need by passing the target element as argument. I pass the interval time as a second argument so each slider can have its own speed.
4) Better than body.onload use the window.onload event to avoid errors if images are not completely loaded.
First remove onload="slideA()" from <body>, then your code should look like this:
<script language="JavaScript">
function mdy(todaysdate) {
return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() + "/" + todaysdate.getFullYear();
};
mdy(new Date());
// here the global vars imgcount and total are removed, each slider has its own
// now define function slide, first arument is id of element its applied to,
// second is the interval in ms, third is the total amount of imgs
function slide(id, intval, total) {
// define vars outside setInterval, otherwise it's always repeated
var image = document.getElementById(id),
imgcount = 1;
image.src = "image/" + id + imgcount + ".jpg"; // setup the first image
// return the interval so it becomes stopable
return window.setInterval(function() {
if (++imgcount > total) imgcount = 1; // increase and compare imgcount in one line
// since imgcount is always increased second compare (< 1) can be omitted
image.src = "image/" + id + imgcount + ".jpg";
}, intval);
}
// when window is loaded start the slider
window.onload = function() {
// start first slider by calling function slide and store it in a variable
var slider1 = slide('img', 3000, 8);
var slider2 = slide('c', 4000, 22); // same with second slider
};
</script>
Now if you want to stop the first slider you can simply do (inside the window.onload):
window.clearInterval(slider1);
Hope that helps.
I am trying to display a div based on the URL parameter. I have to use only html css and javascript. I got it working until the part where the div must be set to display none if the variable (parameter from URL) matches.
HTML
<div id="cfiblinks">
<div class="row">
<div class="twelve columns">
<ul class="nav-bar">
<li>
<a href="#" target="_blank">
<span>Order Document Upload</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span>Business Card History</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span>Material Inventory</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript
<script language="JavaScript">
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[""])[1].replace(/\+/g, '%20'))||null
}
myvar = getURLParameter('UserGroupId');
document.write('The url parameter is: ' + myvar +' ');
if (myvar == 10102) {
document.write('The url parameter is: ' + myvar +' ');
document.getElementById('cfiblinks').style.visibility = 'visible';
} else {
document.write('The url parameter is not : ' + myvar +' ');
document.getElementById('cfiblinks').style.visibility = 'hidden';
}
</script>
Any help would be greatly appreciated. I suspect something is wrong with the document.getElementById.
You can set the display property using block or none.
document.getElementById('cfiblinks').style.display = 'block'; //Will show
document.getElementById('cfiblinks').style.display = 'none'; //Will hide
Try this..
if (myvar == 10102) {
document.write('The url parameter is: ' + myvar +' ');
document.getElementById('cfiblinks').setAttribute("style", "display:block");
} else {
document.write('The url parameter is not : ' + myvar +' ');
document.getElementById('cfiblinks').setAttribute("style", "display:none");
}
Try:
document.getElementById('something').style.display = "block";
and
document.getElementById('something').style.display = "none";