I have added an onclick function to a div here:
<script type="text/javascript">
document.getElementById("fab").onclick = function() {
location.href = 'http://your.url.here';
}
</script>
When you hover over the div, it doesnt show the URL in the bottom left of the browser like an anchor tag does (see picture): http://i.stack.imgur.com/iGLHS.png
Is there any way to make the browser show the link, when it has been added with javascript?
Add the title attribute to your element:
<div id="fab" title="http://your.url.here'></div>
Actually this is different than the popup you're seeing, but it might be as close as you can get.
As #Benten points out, you'd have to set window.status, which isn't allowed by most modern browsers.
I don't think you can directly access the property that you are looking for any more. Usually it's ignored. See this: http://www.w3schools.com/jsref/prop_win_status.asp . I'd say the other answer is your best bet.
I think something different. I hope i didnt understand it wrong. If you add -a- element as parent to your -div- it acts like what you want.
var element = document.getElementById("fab");
var aa = document.createElement("a");
aa.setAttribute('href', 'http://www.google.com');
var parent = element.parentNode;
parent.insertBefore(aa, element);
aa.appendChild(element);
please let me know if i understand it wrong?
Related
Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:
If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.
In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}
alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools
The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.
I'm a student and still learning, so my apologies if this is a silly question. Normally I can figure this out by sifting through other questions here, but I seem to be stuck this time.
I'm just trying to do a simple mouseover/mouseout, where when you mouse over the image, the image disappears and the text in the anchor tag changes to the name of the link (ie. hover over the house icon and it disappears and is replaced by "HOME"). I got that part working fine, but I can't get it to switch back to the icon when the mouse leaves the link. This is the current HTML for the link:
<li class="linksLi">
<a id="#homeLink" data-namesrc="HOME" class="linksA">
<img src="img/home.svg" alt="Home Icon" class="links">
</a>
</li>
and then the javascript:
var linksImg = document.querySelectorAll(".links");
var linksName = document.querySelectorAll(".linksA");
function changeImg() {
this.classList.add("hide");
this.parentElement.innerHTML = this.parentElement.dataset.namesrc;
}
function changeName() {
this.innerHTML = "";
this.nextChild.classList.remove("hide");
}
for (var i=0;i<linksImg.length;i++) {
linksImg[i].addEventListener("mouseover", changeImg, false);
}
for (var j=0;j<linksName.length;j++) {
linksName[j].addEventListener("mouseleave", changeName, false);
}
changeImg() is attached to the img tag, and changeName() is attached to the anchor tag. But my issue is in changeName(), when I try to remove the class "hide" from the child, it tells me the child is undefined (even though the img tag is clearly inside the a tag in the HTML). I've seen a lot of stuff regarding nodes and whitespace that I don't entirely understand, so I have no idea if that's what the issue is? Maybe this is a really basic problem and I'm missing something really obvious, I have no idea, but any help would be greatly appreciated!
JAVASCRIPT ONLY PLEASE, no jQuery!
Try taking the event as a parameter to the functions and using "event.target" instead of "this"
function changeImg(evt) {
evt.target.classList.add("hide");
evt.target.parentElement.innerHTML = evt.target.parentElement.dataset.namesrc;
}
"this" is a tricky keyword in JavaScript which can be many things depending on how the function is called.
And a JSFiddle for you.
EDIT
I have updated the JSFiddle to add/remove a span instead of setting innerHTML.
Thank you for the answers! For anyone wondering, I also got it working by making the img and anchor tags sibling, rather than the img being a child of the anchor tag. That way I could just target nextSibling in the js, and the issue of innerHTML creating an empty anchor tag and removing the img was no longer a problem.
Ive tried many way but im new to JS, I mainly do PHP.
Anyway the code:
<script>
var userinput = $('input[name="imdbid"]');
userinput.change(
function(){
$('#userimdb').attr('href')+$('input[name="imdbid"]').val();
}
);
</script>
Basically, the imdbid is gotten from a input tag, basically I want to append whatever the user types to a href of a tag, This doesnt seem to work doe. When I alert() it, it seems to give me the output of what its meant to but when I remove alert() it doesnt seem to change the href, I also tried .setAttribute() but that also just did nothing.
Please help me out im going insane right now.
Try this:
You need to assign it to href attribute..
var userimdb=$('#userimdb');
var baseURL=userimdb.attr('href');
$('input[name="imdbid"]').change(function()
{
var userimdb=$('#userimdb');
userimdb.attr('href', baseURL + $(this).val());
});
You're not setting the attribute right now, only accessing it. In addition, you need to store the original href attribute somewhere so you're not adding the same text repeatedly. Here's the updated code:
var userinput = $('input[name="imdbid"]');
var orighref = $('#userimdb').attr('href');
userinput.change(function(){
$('#userimdb').attr('href', orighref + userinput.val());
});
I have a bug in my code and i try to remove it using jquery.
Some code:
<div id="content">
s
<div class="breadcrumb">
<h1>Test and etc</h1> etc etc....
I want to use jquery to remove the s (if exist...in some cases not)
I've tried
var cont = $('#content').html();
$('#content').html(cont.replace('/s\s(.*)/','$1'));
Seams that the code above is not working...some sugestions ?
Don't use a regex to remove a textnode by running a replace on the HTML, target the textnode directly
var content = document.getElementById('content'),
child = content.firstChild;
if (child.nodeType === 3) { // if textNode
content.removeChild(child);
}
FIDDLE
You do need to call the code when the DOM is ready. And remove the quotes.
$(document).ready(function(){
var cont = $('#content').html();
$('#content').html(cont.replace(/s\s(.*)/,'$1'));
});
Fiddle : http://jsfiddle.net/anj1x7xe/
I don't understand, why won't you remove it directly from the HTML source?
Is the code automatically generated (aka you didn't manually write that 's' there)? Because if it is, I strongly suggest you correct the bug itself. What you're trying to do is covering up a bug, not fixing it. It's good practice to get to the source of a bug and fix it.
Alas, if you really want to do this: You need to specify when your script is called. Most likely, you want it put into the $(document).ready() event.
$(document).ready(function(){
var cont = $('#content').html();
$('#content').html(cont.replace('/s\s(.*)/','$1'));
});
So, related to an earlier question, but forgive me for my naive javascript ways. Basically I now want to automatically bring a text input into focus when it is added to the DOM. Part of me thinks that I might be trying to add focus to the object before it exists, but I'm not quite sure how I would go about fixing it. Right now this is my relevant code:
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
this.parentNode.replaceChild(searchWrapper, this);
document.getElementById("search-wrapper").focus();
But it's not quite working. Should I be setting focus as a callback on replaceChild, or is there some other way to do this?
Try the following:
Live Demo
var searchOrig = document.getElementById("search-wrapper");
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
searchWrapper.setAttribute('tabindex', '0');
searchOrig.parentElement.replaceChild(searchWrapper, searchOrig);
document.getElementById("search-wrapper").focus();