JS conditions on images [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I need to develop a sort of calculator which show a set of images and the client can select and depending on the choice he moves to next step of choices. At the end of all the choices he will be given a package depending on the choices of all steps chosen.
A working example of something similar can be found in this link: http://store.virginmedia.com/big-bundles.html and then clicking on the 'help me choose' popup on the left hand side.
Can anyone suggest any methods or libraries I can start from in achieving something like this ?

Okay. So this is pretty basic, but I created a JSFiddle just to get you started. I is not pretty, but it should give you some indication of what is required.
Here is the code, if there is something about it that is unclear, google it:
var selections = {
"opt1": false,
"opt2": false,
"opt3": false,
"opt4": false,
"opt5": false,
"opt6": false
};
$(document).ready(function() {
$('.option').click(function(event) {
var id = event.target.id;
if (selections[id]) {
$('#' + id).removeClass('checked-option');
selections[id] = false;
} else {
$('#' + id).addClass('checked-option');
selections[id] = true;
}
});
$('#btn1').click(function() {
$('#grp1').hide();
$('#grp2').show();
});
$('#btn2').click(function() {
$('#grp2').hide();
$('#grp1').show();
});
$('#btn3').click(function() {
var content = 'Selected:<ul>';
for (var i in selections) {
if (selections[i]) {
content += '<li>' + i + '</li>';
}
}
content += '</ul>';
$('#grp2').hide();
$('#done').html(content);
$('#grp3').show();
});
$('#btn4').click(function() {
$('#grp3').hide();
$('#grp2').show();
});
});

Related

EmailJS message can't be sent [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 23 hours ago.
Improve this question
I'm new to EmailJS and trying to use it on my portfolio in the contact form. I tried different solutions and still showing the same error, I think I'm stuck now
I created the account, activated it, activated MFA as well, and tried multiple codes from the doc of EmailJS and from tutorials and still showing me the same error on the console. I even changed the service_id, template_id, and public key.
The error: Uncaught The public key is required. Visit https://dashboard.emailjs.com/admin/account
code on HTML:
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#emailjs/browser#3/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init("My-Public-Key");
});
</script>
code on JS:
function SendMail(){ event.preventDefault();
var params ={
from_name : document.getElementById("fullname").value,
email_id : document.getElementById("email-id").value,
message : document.getElementById("message").value
}
const serviceID = "service_uzy3k87";
const templateID = "template_btcihm8";
emailjs.send(serviceID, templateID, params)
.then(res=>{
document.getElementById("fullname").value = "";
document.getElementById("email-id").value = "";
document.getElementById("message").value = "";
console.log(res);
alert("Your message sent successfully!!")
})
.catch(err=>console.log(err));
}

Getting random images from unsplash api? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm new to working with API's and coding in general (started 2018) and I'm currently working with the Unsplash API. The problem is when I search for a term like "mountains", the API returns random images that have nothing to do with my search term. For example when I search "mountains" I'm getting pictures of motorbikes?! Help please! :D
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>API-Project</title>
</head>
<body>
<input type="text" id="search" />
<button id="searchButton">Search!</button>
<p id="result"></p>
<script src="/app.js"></script>
</body>
</html>
And the js:
document.getElementById("searchButton").addEventListener("click", function() {
let accessKey = "my_access_key";
let searchTerm = document.getElementById("search").innerHTML;
//let nextPage = 1;
let url =
"https://api.unsplash.com/photos/?client_id=" +
accessKey +
"&query=" +
searchTerm +
"&page=" +
nextPage +
"&per_page=20";
// Request
fetch(url)
.then(function(data) {
return data.json();
})
.then(function(data) {
console.log(data);
document.getElementById("result").innerHTML = JSON.stringify(data);
});
});
Just like #Turnip said, if the element with id: 'search' is a form input element like;
<input type='text'/>
<textarea></textarea>
you should replace your line 3 this instead:
let searchTerm = document.getElementById("search").value;
just checked the API you using, seems the way you calling it is different from the way it's documented:
https://api.unsplash.com/search/photos?client_id=YOUR_ACCESS_KEY?page=1&query=mountains

Javascript Code function? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I donot know javascript. I have to do some edits.
I want to know what does the below code does
$(window).load(function(){
setTimeout(function(){
$("#gmbox div").animate({'top':60},1500,"easeOutElastic");
},1500);
});
function trackLink(link, category, action) {
try {
_gaq.push(['_trackEvent', 'tracklink' ,'click',link.href ]);
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){}
}
$('[rel="outbound"]').click(function(e){
try {
_gaq.push(['_trackEvent','outbound','click',this.href]);
}catch(err){}
});
});
Here is your code with comments added to describe what's going on
// wait for the document to finish loading then...
$(window).load(function(){
// wait a while and then...
setTimeout(function(){
// animate out a the div element whose id is 'gmbox' (look up the jquery animate API to understaind the specifics)
$("#gmbox div").animate({'top':60},1500,"easeOutElastic");
},1500); // how long to wait (1.5 seconds)
});
// this function isn't actually called anywhere in the code you provided but it could be called from elsewhere
function trackLink(link, category, action) {
try {
// tell google analytics that the user clicked on a link
_gaq.push(['_trackEvent', 'tracklink' ,'click',link.href ]);
// wait 0.1 seconds then change the url in the address bar
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){} // don't worry if this code caused an error
}
// when the user clicks on an element with a rel='outbound' attribute...
$('[rel="outbound"]').click(function(e){
try {
// report this to google analytics
_gaq.push(['_trackEvent','outbound','click',this.href]);
}catch(err){} // don't worry if this code caused an error
});
});

Using URL fragment to determine which jquery function is run [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to link to a page like (domain.com/page#loadThickBox1) and have it run jquery function that loads a thickbox by default. What code do I need to run to accomplish this?
For instance, these might be a few links:
domain.com/page#loadThickBox1
domain.com/page#loadThickBox2
domain.com/page#loadThickBox3
NOT like this:
domain.com/page/loadThickBox1
domain.com/page/loadThickBox2
domain.com/page/loadThickBox3
Use location.hash
$(function() {
switch( location.hash.replace('#','') ){
case 'loadThickBox1':
//do something!
loadThickBox1();
break;
case 'loadThickBox2':
//do something!
loadThickBox2();
break;
case 'loadThickBox3':
//do something!
loadThickBox3();
break;
}
});
location.href.split('#')[1]
This will get you the words after the #. Load the appropriate box given this value.
You can listen to the hashchange event, parse the hash and run your function accordingly.
DEMO
function handleHash(hash) {
var hash = hash.replace('#', '');
if (!hash) return;
console.log('Loading thick box ' + hash.slice(-1));
}
window.addEventListener('hashchange', function () {
handleHash(location.hash);
});
//handle initial hash when page loads
handleHash(location.hash);

Follow all users on a twitter page [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm on https://twitter.com/#!/username/followers ; is there any greasemonkey script to follow all the twitter users on that page?
Here's a new one which also employs a delay to prevent spam issues.
var FOLLOW_PAUSE = 1250;
var FOLLOW_RAND = 250;
var PAGE_WAIT = 2000;
__cnt__ = 0;
var f;
f = function() {
var eles;
var __lcnt__ = 0;
eles = jQuery('.Grid-cell .not-following .follow-text').each(function(i, ele) {
ele = jQuery(ele);
if (ele.css('display') != 'block') {
console.trace('Already following: ' + i);
return;
}
setTimeout(function() {
console.trace("Following " + i + " of " + eles.length);
ele.click();
if ((eles.length - 1) == i) {
console.trace("Scrolling...");
window.scrollTo(0, document.body.scrollHeight);
setTimeout(function() {
f();
}, PAGE_WAIT);
}
}, __lcnt__++ * FOLLOW_PAUSE + Math.random()*(FOLLOW_RAND) - FOLLOW_RAND/2);
__cnt__++;
});
}
f();
What it does:
Looks for follow buttons
Checks that you aren't already following or pending (display: block check)
Sets a timer to click the FOLLOW buttons every 500ms to prevent spam issues.
NEW! When it's done them all, scrolls the page and waits a couple seconds for the next loads to appear, then repeats the whole process!
Notes for hackers:
Works on Chrome latest version and Twitter as of the 30th of Sep 2016.
You seem to need to "click" the DIV inside the A tag, not the A tag itself.
HOMEWORK: Maybe try jQuery's live() function to auto-click any new buttons which show up after the initial page load :)
Disclaimer: This is not a hack...just a technique to save some wrist and finger RSI :) Regardless, use cautiously and respectfully.
UPDATE: Improved for latest twitter. Now employs randomness in the timing to make you look less like a bot
Twitter uses JQuery, so a way to do this, assuming that you aren't doing this so much as to trigger the rate limits (the rate limits will apply more aggressively to web client users as compared to API users) is to do the equivalent of:
$('.button.follow-button').click()
You can accomplish this in GreaseMonkey if you'd like, or setting it as a JavaScript bookmarklet, or by copy-pasting this into your address bar and hitting enter:
javascript:$('.button.follow-button').click()
I modified the code that Hari Karam Singh posted earlier to work to the to-date Twitter.
__cnt__=0; jQuery('.stream button.follow-button > span.follow-text').each(function (i, ele) { ele = jQuery(ele); if (ele.css('display')!='block') {console.log('already following:', i); return;} setTimeout(function () {ele.click();}, __cnt__++*500); });
It doesn´t work anymore, but if you use the object instead of the alias i´ll do javascript:jQuery('.button.follow-button').click();.
You can also use the in-built debugger in chrome or firebug to add a button that cam do this for you, and add a settimeout to avoid interference with the api's restrictions.
<input type="button" onclick="javascript:jQuery('.button.follow-button').click();" value="follow!
">

Categories

Resources