Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.
Related
I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});
I am trying to do a thing that seems easy to me but I'm not very familiar with javascript language and I can't find any documentation to do what I want.
Let's say I have a code like this:
<div id="sourceA">Text</div>
<div id="sourceB">Another</div>
<div id="destination"></div>
Let's say I click on the "sourceA" div, the text contained in it should go in the "destination" div.
Unfortunately, I have no idea how to do it. Can you help me? And maybe also suggest me somewhere I can go and learn something more about this code?
Read more about JavaScript and jQuery events. What you need here is a .click() event on sourceA to handle your behaviour as follows:
$("#sourceA").click(function() {
$("#destination").html($(this).html());
});
HTML:
<div id="sourceA" class="source">Text</div>
<div id="sourceB" class="source">Another</div>
<div id="destination"></div>
JS:
$('.source').click(function(e) {
$('#destination').text($(e.currentTarget).text())
});
Take a look at this example
var copyContentToDestinationClickHandler = function(event) {
$('#destination').empty();
$('#destination').append($(event.target).text());
}
$('#sourceA').click(copyContentToDestinationClickHandler);
$('#sourceB').click(copyContentToDestinationClickHandler);
https://jsfiddle.net/7v5a6bsu/
I am having anchor tag in my page. I like to trigger click event onload . Which means I wanna open this link "whatsapp://send?text=test&phone=+123456789" go to whatsapp. The link is working if you manually click, but not working onload page. Same result with jquery. Is there anyway to do this?
This is what I have:
<body onload="document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
To clarify this, there is no problem for the link with http://, its working. Just not working for whatsapp:// maybe?
Firstly, don't use inline JS. It's just not right.
Now coming to the solution. Why don't you try something like
document.body.onload = function(){
window.location.href = "whatsapp://send?text=test&phone=+123456789";
}
If you still want to stick to inline JS, I'd suggest prefix your code with javascript: since some browsers otherwise ignore inline JS.
So now your code would become
<body onload="javascript:document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
Maybe location.href is a good solution for you.
<body onload="location.href = 'whatsapp://send?text=test&phone=+60123456789">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
</body>
try something like this
<href="intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end">
what is happening when u click on the link ? any error or blank page ?
You can use, $(window).load(function() {}) or even $(document).ready(function() {})
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
Run this snippet, it is working
If you want to run it on load then why you are not using :
window.location = "whatsapp://send?text=test&phone=+123456789"
I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>
you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>
get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()
What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();
You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp
Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.