I simply try to change the value of the href
$("div").click(function() {
$("a#link1").attr("href").val("www.bing.de");
});
div {
border: 1px solid black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>
But this throws the error Uncaught TypeError: $(...).attr(...).val is not a function and I don't know why? As far as I know val IS a function.
Try this.
You can't change an attribute with val() method. val() is use only for input value.
You can use attr("aatribute_name",value); or prop("attribute_name","value");
$("div").click(function() {
$("a#link1").attr("href","www.bing.de");
});
div {
border: 1px solid black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>
You can use attr or prop
$("a#link1").prop("href","www.bing.de")
It is the attribute value that you want to change not val. val is basically use to get the value and some time set the value, but not the attribute.
Try the following snippet.
Problem is here: $("a#link1").attr("href").val("www.bing.de");
$("div").click(function(){
$("a#link1").attr("href","www.bing.de");
});
div {
border: 1px solid black;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="www.google.de">LINK</a>
<div>Click here</div>
Javascript implementation using setAttribute() :
document.querySelector("a#link1").setAttribute("href", "www.bing.de");
//or
document.querySelector("a#link1").href = "www.bing.de";
Hope this helps.
Assign with href is also working
$("div").click(function() {
$("a#link1")[0].href = "www.bing.de";
});
.val() is used for inputs, selects and textareas. It should be called like this:
$("div").click(function() {
$("a#link1").attr('href','www.bing.de');
});
Why it was not working because you were trying assign value to anchor tag. val() doesn't assigns value to anchor tag. For that you have to use method as below.
Not this :-
$("div").click(function() {
$("a#link1").attr("href").val("www.bing.de");
});
This one -
$("div").click(function() {
$("a#link1").attr("href","www.bing.de");
});
Related
Is there a way to set the focus on an on page load? I have found documentation stating to use the autofocus attribute but the documentation says that attribute only applies to input, button, textarea, and select.
Thanks.
You can try scrollIntoView method on window onload
window.onload=function(){
document.getElementById("ID_OF_IMAGE").scrollIntoView();
}
I think you looking for something like that:
window.addEventListener('load', function() {
document.querySelector(".classFromImage").focus();
})
What you could do is search for the img element with the autofocus attribute and set the focus after the DOM is read. You also need to set the tabindex to get that working.
I would only search for img[autofocus] so that you don't mess too much around with the default behavior.
window.addEventListener('DOMContentLoaded', function() {
let elm = document.querySelector("img[autofocus]")
if (elm) {
elm.focus()
}
})
img {
width: 100px;
height: 100px;
display: inline-block;
}
:focus {
border: 4px solid red;
}
<img autofocus tabindex="0">
You can focus a nonfocusable element by adding tabindex="0" attribute to the tag and use focus() method with js.
<img class="focusable" tabindex="0" src="#"/>
window.addEventListener('load', function() {
document.querySelector(".focusable").focus();
})
I am trying to add a 10px outset border to a group of images using jquery.
Current jQuery code:
$(document).ready(function () {
$("img").hover(function () {
$(this).css("border-outset", "10px");
});
});
I use an alert to test the hover function and it works correctly but when testing the hover for the css properties/attributes mentioned above it does nothing.
Any ideas?
just use css:
img:hover{
border : solid 10px
}
No need for jQuery
img:hover{
border : solid 10px
}
<img src="https://pbs.twimg.com/profile_images/660852157827166208/G36DKwIS_400x400.jpg"/>
there is no property called border-outset, use border instead
$(document).ready(function () {
$("img").hover(function () {
$(this).css("border", "10px solid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/100/" />
<hr />
<img src="//placehold.it/100/" />
you can simplify this and just use plain CSS
img:hover {
border: 10px solid
}
<img src="//placehold.it/100/" />
It would be something like this border-image-outset , try and let me know
$(document).ready(function () {
$("img").hover(function () {
$(this).css("border-image-outset", "10px");
});
});
I'm guessing that when one img is hovered, you want all imgs to be styled. If so, here is my answer.
$(this).css("border-outset", "10px");
this Refers to the current img that was hovered.
Try this instead:
$("img").css("border", "10px solid #000");
$(document).ready(function () {
$("img").hover(function () {
$("img").css("border", "10px solid #000");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover one of the images for all the images to be styled with a black border.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/870425/profile/profile-80.jpg?4">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/870425/profile/profile-80.jpg?4"/>
You can replace the CSS with your own, this is just for example.
However, if you only want to style one img at a time, you should instead use CSS instead of JS as other answers have mentioned.
I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.
I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all
<html>
<head>
<title>NSP Automation</title>
<script src ="jquery.min.js">
</script>
</head>
<body>
<div class="container">
My Name is = <span id="name">__________<span>
</div>
<script>
$(document).on('click', '#name', function(){
document.getElementById("name").innerHTML = "<input type=\"text\">";
});
</script>
</body>
</html>
any pointers on how to achieve this ?
Thanks,
Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
After clicking on the span-element, you remove the listener on it again, and you should be able to type.
http://jsfiddle.net/218rff9v/
Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.
function convertSpanToInput() {
// Insert input after span
$('<input id="tmp_input">').insertAfter($(this));
$(this).hide(); // Hide span
$(this).next().focus();
$("#tmp_input").blur(function() {
// Set input value as span content
// when focus of input is lost.
// Also delete the input.
var value = $(this).val();
$(this).prev().show();
$(this).prev().html(value);
$(this).remove();
});
}
$(function() {
// Init all spans with a placeholder.
$(".container span").html("__________");
// Create click handler
$(".container span").click(convertSpanToInput);
});
Here is an html example with which you can test it:
<div class="container">
My Name is = <span></span>. I'm <span></span> years old.
</div>
JsFiddle: http://jsfiddle.net/4dyjaax9/
I'd suggest you have input boxes and don't do any converting
Simply use CSS to remove the borders and add a dashed border bottom
input[type=text]{
border:none;
border-bottom:1px dashed #777;
} <!-- something like that -->
add a click handler to add a edited class, so you can remove the bottom border
input[type=text].edited{
border:none;
}
That way you don't need to replace html elements, you just style them to look different
Why not use text input and only change CSS classes?
CSS:
.blurred{
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
border-bottom-color: #000000;
padding: 0px;
}
.focused{
border: 1px solid #999999;
padding: 3px;
}
JavaScript:
$('#nameInput').focus(function(){
$(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
$(this).removeClass('focused').addClass('blurred');
});
HTML:
<div class="container">
My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>
Check this jsfiddle:
http://jsfiddle.net/gwrfwmw0/
http://jsfiddle.net/we6epdaL/2/
$(document).on('click', '#name', function(e){
if( $("#myText").is(e.target))
return;
$(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});
$(document).on("blur", "#name", function(){
$(this).html( $("#myText").val() );
});
Maybe I'm not using 'this' right.
HTML:
<div style="margin: 4px; padding: 10px; border: solid 1px;" onmouseover="darken(this);">
JavaScript:
function darken(elt) {
"use strict";
document.getElementById(elt.id).style.backgroundColor = "#e8e8e8";
}
?
If you have a reference to the element, there's no need to lookup its ID then query the document for the element matching that ID. (There is no ID assigned to that element by the way).
this is a reference to the element. You could simply use it as:
function darken(elt) {
elt.style.backgroundColor = '#e8e8e8';
}
jsFiddle Demo
The first issue is that there is no id on that element so you cannot use document.getElementById to find it.
An advantage that you can use is that you already passed the element with this:
function darken(elt) {
"use strict";
elt.style.backgroundColor = "#e8e8e8";
}
You havn't provided any Id to your div element
<div id="myDiv" style="margin: 4px; padding: 10px; border: solid 1px;" onmouseover="darken(this);">
JS Fiddle Demo
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});