window.onload = function() {
try{
document.getElementById('result').focus();
}catch(err){
}
}
In my form div result id load when form submits and when it show i want to focus on it.
the above code is not working in my case.
Please help me to find problem with this code.
jsfiddle
According to your jsFiddle, #result is a div. You can't really focus on a div the way you can with a form element or link, but you can jump to that part of the page using the following javascript instead:
window.location.hash = '#result';
You can not focus to a div element. But you can use
window.location.hash = '#result';
to scroll to div#result element
Here's a working jsFiddle.
1. Give the div a tab index of 0 (meaning it is ordered first):
<div class="result" tabindex="0" id="result">
(Find out more about the tabindex property here.)
2. Remove your <script> tags:
window.onload = function() {
try{
document.getElementById('result').focus();
}catch(err){
}
}
3. Use no wrap in <head> instead of onload.
You are trying to focus on a div, which by default can not be put to focus using script. To do that you need to set the tabindex attribute of the result div. You need to add the attribute tabindex and set its value to 0 and then your function document.getElementById().focus() will work
Also in your fiddle is not allowed inside javascript block. Try this fiddle
Related
I have created a button dynamically in JavaScript and i am deleting the same when user clicks X symbol on it..
I am setting style.display=none to achieve this but the problem is in HTML there is space in it even after deleting the button. How can i delete the button without any space in HTML.
var x = document.getElementById(id);
x.style.display='none';
First of all, if you Google remove HTML element in javascript the first thing you see is this: How to remove an HTML element using Javascript?
and it works, but I'll pitch in my 2 cents anyways since that one uses parentElement, which is kinda outdated.
There's a .remove() method in javascript that lets you remove an html element.
It's as simple as:
var x = document.querySelector("#id");
x.remove();
but I doubt that will solve your issue, you might want to remove the parent element if it has a margin or padding like so:
var x = document.querySelector("#id");
x.parentElement.remove();
cheers
try it if u want to change the css
<script type="text/javascript">
$("#id").css('display', 'none');
</script>
or use it for add or remove the class. change the add to remove if want remove the class
<script type="text/javascript">
document.getElementById("submit").classList.add('disabled');
</script>
We have 2 webpages one.html & two.html.
In one.html we have a button element with text,
<button id="next">Next</button>
We want to display the content inside the button from one.html, i.e "Next" in two.html inside a
<p id="getfromone"></p>
We tried using jQuery about it, written below, called by a onload function with in body element.
document.getElementById("getfromone").innerHTML = $('#getfromone').load("one.html #next");
However, this only displays [object Object]
Please suggest what can be done about it.
Try this out, You can check the working code in codepen.
$(document).ready(function(){
var content;
$("#oneDiv").load("one.html button#next", function(){
content = $(this).text();
$("#getfromone").text(content);
});
});
I have tried the following jQuery code to move a <select> element (that I can only see within the DOM) after a <form> element but it does not work:
<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>
I have also tried:
<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>
Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.
Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.
This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
The code, only located in the DOM, is as follows:
<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>
The select dropdown box is supposed to be moved here:
The relevant code at the area is as follows:
<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post">
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript>
<br>
<small>Powered by LocalCurrency. Rates from Yahoo! Finance</small>
</form>
Thanks for any help!
1st: Be sure you include jquery
2nd: Wrap your code in
$(document).ready(function(){
// your code here
});
3rd: Try to use .each()
$(document).ready(function(){
jQuery('select[id^=lc_currency]').each(function(){
var getformId = $(this).attr('id').replace('currency','change');
//alert(getformId);
$(this).insertAfter('form#'+ getformId);
});
});
Working Demo
I guess your id strings should be inside quote , Try this
$(function(){
jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});
Edit:
Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.
$(window).load(function(){
setTimeout(function(){
jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
},1000);
});
From the screenshots you added, it seems like you want to insert the select inside the form, not after, this is what I used:
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');
I have a HTML div that whose visibility i have set to hidden like this ..
<div id="checkinuserform" style=" margin:20px; visibility:hidden;">
</div>
Now at specific point i want to show this div ..For this i have added following code in jquery ...
var content = $("#checkinuserform").clone().show();
BUT , I am not able to see the DIV .Also ,adding clone function is mandatory for me in this case..
Please help me ..
Thanks..
When you clone an element, you get a duplicate of it in a variable. It won't be visible until you put it somewhere in the page.
Additionally, show() doesn't affect visibility. Either change the default style to display: none or replace show() with .css({visibility: "visible"})
replace
visibility:none
with
display:none;
You can try this.
var content = $("#checkinuserform").clone().css('visibility','visible');
Fiddle is here. http://jsfiddle.net/2f7yctmn/
I think you can user css to make it visible instead of clone, try this line of code
var content = $("#checkinuserform").css('visibility','visible');
but if clone function is mandatory for you, you can write this code
var content = $("#checkinuserform").clone();
content.css('visibility','visible');
I think this could help
I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)
this is the html . the id page, is the highlighted number
<div class="grid_1 pagelink" id="page"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:
$('.pagelink').live('click', function(e){
e.preventDefault();
var frame = $(this).text() - 1;
var frames = 240 * frame;
// $('#gal').animate({marginLeft:'500px'},'slow');
$('#gal').animate({marginLeft: "+="+frames+'px'},'slow');
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
// $('#book').animate({ left: '50' });
})
I thought that the .live() would do that for me but it is not working.
I hope you could help
thank you
Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.
Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like
$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');
live should work fine. i think you have a bug in your code, and its probably here:
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
what exactly are you trying to accomplish with this code?
when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2
in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one