I'm using some javascript to draw a svg path using divs as endpoints.
var thepath = $('#thepath');
var startx1 = $('#box2').position().left;
var starty1 = $('#box2').position().top;
var realDealPath = 'M ' + startx1 + ',' + starty1;
var startx2 = $('#box3').position().left;
var starty2 = $('#box3').position().top;
realDealPath += 'L' + (startx2+50) + ',' + starty2;
var startx3 = $('#box6').position().left;
var starty3 = $('#box6').position().top;
realDealPath += 'L' + startx3 + ',' + starty3;
thepath.attr('d', realDealPath);
It works great! But when I scale the browser, the svg path doesn't adjust to the new div positions. Is there a way to keep these values updated?
Thank you so much for your help! :)
function tickleTux() {
var tuxImg = document.getElementById('tux');
tuxImg.style.transition = "transform .5s";
tuxImg.addEventListener('click', itTickles, false);
function itTickles() {
var addRotation = 10;
var rotationValue = '"' + 'rotate' + '(' + addRotation + 'deg' + ')' + '"'
tuxImg.style.transform = rotationValue;
console.log(rotationValue);
}
Basically, this adds a rotation style to an img and makes it rotate.
I just want to know why adding the value to the transform property in this way doesn't work. Why?
The console.log command prints out: "rotate(10deg)"
So what's stopping it from functioning? Some kind of rule?
Thanks for your help.
The value shouldn't contain " around it.
var rotationValue = 'rotate(' + addRotation + 'deg)';
I don't know what is happening, but both my images and links are not working, even after declaring globally!?
if I write the src directly into src then everything seems fine , even alert pops the same url and img src! need help guys!
var combo0;
var combo1;
var combo2;
var combo3;
var random;
var images=["../IMAGES/park.jpg","../IMAGES/palace.jpg","../IMAGES/oriental.jpg"]
var weburls=["https://www.royalplaza.com.hk","https://www.caesars.com","http://www.venetianmacao.com/"]
function gethotel(){ // a= check-in b=check-out and c=no-of-rooms
var arraysofobjects=[
combo0=[
],
combo1=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Locate"
,price:"HKD 1200"},
],
combo2=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Located drive away."
,price:"HKD 1200"},
{hotelname:"Caesars Palace",purl:"images[1]",rflag:"",weburl:"weburls[1]",description:"Built in 1903, the treatments"
,price:"HKD 1900"}
],
combo3=[
{hotelname:"The Royal Plaza",purl:"images[0]",rflag:"",weburl:"weburls[0]",description:"Located in less ."
,price:"HKD 1200"},
{hotelname:"Caesars Palace",purl:"images[1]",rflag:"",weburl:"weburls[1]",description:"Built in 1903, tatments"
,price:"HKD 1900"},
{hotelname:"The Venetian Hotel",purl:"images[2]",rflag:"",weburl:"weburls[2]",description:"The Vor area."
,price:"HKD 2200"}
]
]
random=Math.floor((Math.random() * 4));
return arraysofobjects[random];
}
var object=gethotel();
for(var i=0; i<random;++i) {
var heading = '<h2>' + object[i].hotelname + '</h2>';
var description = '<p>' + object[i].description + '</p>';
var priceho='<h4>' + object[i].price + '</h4>';
//web url
var a = document.createElement('a');
var linkText = document.createTextNode("Offical website");
a.appendChild(linkText);
a.title = "official website";
a.href = object[i].weburl;
var hotel = '<img src="object[i].purl">' + '<div>'+ heading + description + priceho + '<a target="_blank" href=object[i].weburl>Official website</a>' +'</div>';
var str="Details";
var link=this.str.link("room.html");
document.getElementById("hotels").innerHTML+=hotel + link;
}
It looks like is may be because your weburl:"weburls[0]" property value has quotes around it. Try it like: weburl:weburls[0].
I assume that you have an array elsewhere in your code named weburls, and the above property is supposed to be setting the weburl property equal to the value of the 0-indexed item in weburls.
With the quotes it means after this line a.href = object[i].weburl;, a.href is literally equal to "weburls[0]". You should be able to perform an inspection on the DOM to confirm this.
Update
The code in the for loop seems that it could be replaced with this:
var heading = '<h2>' + object[i].hotelname + '</h2>';
var description = '<p>' + object[i].description + '</p>';
var priceho='<h4>' + object[i].price + '</h4>';
var hotel =
'<img src="' + object[i].purl + '" />' +
'<div>' + heading + description + priceho +
'<a target="_blank" href="' + object[i].weburl + '">Official website</a>' +
'</div>';
document.getElementById("hotels").innerHTML += hotel;
I'm using the GIPHY api to display an image based on a query. Below is the code I'm currently using to pull the image. It works but the problem right now is that each time you visit the website it shows the same GIF every visit until the query changes. What I'd like is for the GIF to update after every visit or page reload to a new random image in the array even if the query is the same. I'm really new to javascript and am unsure how to solve this problem so any help would be much appreciated!
Here is the function I'm using to query data
function weather(position) {
var apiKey = '';
var url = '';
var data;
// console.log(position);
$.getJSON(url + apiKey + "/" + position.coords.latitude + "," + position.coords.longitude + "?callback=?", function(data) {
$('.js-current-item1').html(Math.floor(data.currently.temperature) + '°');
$('.js-current-item2').html(data.currently.summary);
gif(data.currently.icon)
city(position.coords.latitude + "," + position.coords.longitude)
});
}
And here is the function for pulling images from GIPHY
function gif(status) {
var apiKey = '';
var url = 'http://api.giphy.com/v1/gifs/search?q=';
var query = status;
$.getJSON(url + query + apiKey, function(data) {
$('body').css('background-image', 'url(' + data.data[5].images.original.url + ')');
});
}
In your function gif(status) while setting the image choose a random value from data array instead of fixed
change
$('body').css('background-image', 'url(' + data.data[5].images.original.url + ')');
to
var randomIndex = Math.floor(Math.random() * data.data.length);
$('body').css('background-image', 'url(' + data.data[randomIndex].images.original.url + ')');
I am trying to make a dynamic HTML which I'll append using jquery before append if I'll console the HTML everything looks fine but after append in browser The whole structure messed up.
Here is my HTML :
<script>
var title = "my title";
var toolbar ='<hm_toolbar user="current_user " upp="hm" index="hmIndex "></hm><synapse_toolbar uuid=" hm.hm_pk " my-method="get_linked_facts" ng-if=" flag == true "></synapse_toolbar>';
var map_html = '<a onclick="panToMarker(' + lat + ',' + long + ')"> ' + title +'"</a>' + toolbar ;
var li_html = "$('#" + title + "').append('<li class=\"list-group-item\"><div dynamic=\" " + map_html + " \"></div></li> ')" ;
var g =title.replace(/ /g,"_");;
var fn = "function "+ g +"(){ console.log('--working--'); "+ li_html +"; }";
console.log(fn)
eval(fn);
}
</script>
When the above li_HTML does its work means append the HTML the appended is all messed up
Appended HTML :
<li class="list-group-item"><div pantomarker(49.711083,6.251445)"="" dynamic=" <a onclick="> Test"<hm_toolbar index="hmIndex " upp="hm" user="current_user "></hm_toolbar><synapse_toolbar ng-if=" flag == true " my-method="get_linked_facts" uuid=" hm.hm_pk "></synapse_toolbar> "></div></li>
I know I have messed up the concatenation using with quotes but I am not able to fixed the bug .
You said that the console.log() looks OK but you have eval() after that which means that you have to escape some quotes twice.
Try this:
var toolbar ='<hm_toolbar user=\\\'current_user \\\' upp=\\\'hm\\\' index=\\\'hmIndex \\\'></hm><synapse_toolbar uuid=\\\' hm.hm_pk \\\' my-method=\\\'get_linked_facts\\\' ng-if=\\\' flag == true \\\'></synapse_toolbar>';
var map_html = '<a onclick=\\\'panToMarker(' + lat + ',' + long + ')\\\'> ' + title +'</a>' + toolbar ;