I have a HTML page that have 2 tabs settings1, settings2. I want to focus the tabs according to tab_id from javascript. My code is below;
HTML
<form action="action_here" method="post" enctype="multipart/form-data" name="form11">
<ul class="tab">
<li>settings1</li>
<li>settings2</li>
</ul>
<input type="text" id="tab_id1" name="tab_id" >
</form>
Javascript
var tab_id = document.getElementById("tab_id1").value;
if(tab_id == 1){
alert("1");
document.getElementById('selected_tab1').focus();
} else if (tab_id == 2) {
alert("2");
document.getElementById('selected_tab2').focus();
}
Issues:
when page first loaded no tabs are selected. I want to select tab 1 settings1.
2.When I select tab, tab won't selected, but tab_ids are printing right by javascript.
Plaese Help me with this.
You want to make sure your code gets called after your DOM content is ready. If you don't want to use something like jQuery you can do something like this:
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
// your code
})
The implementation of document ready was taken from you might not need jquery.
Related
I have a dropdown menu within a div element. Calling the javascript function HideDropdown() hides the menu when any other main link on the page is clicked (not including links in the dropdown menu itself):
<script>
function HideDropdown() {
$("#dropdown-content-id2").hide();
$("#dropdown-content-id").hide();}
</script>
I also want to call HideDropdown() to hide the menu (if it's open) when I click anywhere on the body except the dropdown menu itself.
In the body tag I inserted this:
<body onload="ShowPage(1)" onclick="HideDropdown()">
That successfully hides the dropdown when I click anywhere on the screen. I want to exclude clicks on the link that shows the dropdown menu and anywhere on the dropdown menu itself, so I revised the body tag:
<body onload="ShowPage(1)" onclick="HideDropdownCall(e)">
and created a new javascript function to call from the body onclick:
<script>
function HideDropdownCall(e) {
if(e.target.id != "dropdown-content-id" ){
HideDropdown();
}
</script>
but that didn't work, so I revised it:
<script>
function HideDropdownCall(e) {
if(e.target.id != "dropdown-content-id" ){
$("#dropdown-content-id2").hide();
$("#dropdown-content-id").hide();}
}
</script>
but that still doesn't work.
So my question is, how can I call the HideDropdown() function from a body click, filtered so that clicks on the dropdown menu itself don't count?
Thanks very much for any help.
EDIT:
After some work, I whittled down my problem to this: I can call the HideDropdown() function from the body tag like this:
<body onload="ShowAjax(1)" onclick="HideDropdown()">
That works. But when I change it to the same function with qualifications and (not if the click event is fired by the dropdown menu), the dev console says "TypeError: e is undefined" so it has something to do with the conditional statement:
<body onload="ShowAjax(1)" onclick="HideDropdown_B()">
<script>
function HideDropdown_B(e) {
if(e.target.id != "dropdown-content-id" ){
$("#dropdown-content-id2").hide();
$("#dropdown-content-id").hide();}
}
</script>
So my problem now boils down to finding out why the new function above returns a type error when the same program without the if statement works.
What you could do is add the property data-prevent='true' on the elements that you want to prevent hiding the dropdown.For example:
Link
and modify your function to filter out those elements like so:
function hideDropdown(evt) {
evt.preventDefault(); // you might not need this (usefull in case of a tags & preventing redirects)
if (!evt.target.getAttribute('data-prevent') || evt.target.getAttribute('data-prevent') === 'false') {
$("#dropdown-content-id2").hide();
$("#dropdown-content-id").hide();
}
}
Here is an example of how it could be done:
let menu = document.getElementById('menu');
document.body.addEventListener('click', e => {
if (!menu.contains(e.target))
console.log('close menu');
});
<div id='menu'><a id='link'>link</a> and menu</div>
document body here
However, you may actually want to close menu depending on which link were clicked.
Another way to do so:
let menu = document.getElementById('menu');
menu.addEventListener('click', e => e.stopPropagation());
document.body.addEventListener('click', e => console.log('close menu'));
<div id='menu'><a id='link'>link</a> and menu</div>
document body here
Thanks to everyone who answered. I solved this problem. Here is the solution:
In the body tag:
<body onload="ShowPage(1)" onclick="HideDropdown_B(event)">
The HideDropdown_B function:
<script>
function HideDropdown_B(event) {
TargetID = event.target.getAttribute('id');
TargetClass = event.target.getAttribute('class');
if((TargetID != "dropdown-content-id") && (TargetClass != "button_01") && (TargetClass != "dropdown") && (TargetClass != "button_dropdown") ) {
$("#dropdown-content-id2").hide();
$("#dropdown-content-id").hide();}
}
</script>
That works to close the menu when clicking anywhere except the excluded elements.
I have problems with the loading sequence of jQuery objects in a HTML and Javascript file when executed on Firefox.
I have several <div> and <button> tags with different id. The page starts with following code:
<script>
$(document).ready(function () {
$("#id_1").show();
$("#id_2").hide();
$("#id_3").hide();
...
});
$(document).ready(function () {
$.getJSON("JSON_file.json", function (json) {
if (json.option[number] == "b") {
$("#id_2").show()
};
if (json.option[number] == "c") {
$("#id_3").show()
};
});
});
</script>
In Chrome and Opera I have no issues with this code. The objects "#id_2" and "#id_3" are not visible on load.
However in Firefox both "#id_2" and "#id_3" are visible for a short moment before being hidden. But I don´t want them to be visible at the begin.
I use localhost to open the files.
Does anybody know what I´m doing wrong?
Hello You can add default hide call in div and then remove that call on condition basic.
Like
<div id="#id_1" class='hide'>
My Div 1
</div>
<div id="#id_2" class='hide'>
My Div 1
</div>
<div id="#id_3" class='hide'>
My Div 1
</div>
Now your script code
<script>
$(document).ready(function () {
$.getJSON("JSON_file.json", function (json) {
if (json.option[number] == "b") {
$("#id_2").removeClass('hide')
};
if (json.option[number] == "c") {
$("#id_3").removeClass('hide')
};
});
});
</script>
I have a clickable div and I want to some how with javascript or jquery to be able to click on it automatically.
My div is like this:
<div style="display:none;" id="button">Hello</div>
That is click able div when display changed to block I need some script to do that for me.
I need some script like, when it sees that div display changed to block then script must click on div id="button"
I have tried this but this is not for that as I searched on google
<script type="text/javascript">
$(document).ready(function(){
$('#button').trigger('click');
});
</script >
Here is an example in JS:
<div style="display:none;" id="button">Hello</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('button');
button.addEventListener('click', function() {
this.style.display = 'block';
})
if (button.style.display === 'block') {
button.click()
}
});
</script >
Update:
If you need to click on button after some javascript actions, just add there following lines:
if (button.style.display === 'block') {
button.click()
}
Update2:
In the provided page I found the method to show mentioned div:
function startChecking() {
secondsleft -= 1e3,
document.querySelector(".load_stream").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds",
0 == secondsleft && (clearInterval(interval),
$(".reloadframe").show(),
document.querySelector(".load_stream").style.display = "none",
$("#btn_play_s").show()
//You need to place it here, after "show" div will be displayed
// and display will have value "block"
)
}
So you can replace last line with $('#btn_play_s').show().click() instead of $('#btn_play_s').show(), it will be enough.
Simply use $('#button').click(); every where you want.
If you want to trigger this event when button display changed first you need create an event for this (because Jquery don't have on display changed event).
And then trigger it's your self:
$('#button2').on('click',function(){
$('#button')
.css('display','block')
.trigger('isVisible');
});
$('#button').bind('isVisible',function() {
alert('Clicked...!');
});
$(function(){
$('#button').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button2" value="display the button"/>
<div style="display:none;" id="button">Hello</div>
I've gotten hundreds of aids from this site. thanks. This is my first question.
Which object is a modal window (alert popup) into the Dom. How can i refer it? How can i know if open or closed? Something like this: if (alertPopup is open) {..code...}
My code is this (i use jQuery):
<script type="text/javascript">
$(document).ready(function(){
var myButton = $('#mybutton')
myButton.click(function(){
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
});
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
</script>
<body>
<input id="myinput" />
<button id="mybutton">Show alert</button>
</body>
The purpose of the code is trigger up the event 'click' on the button whith key 'enter'. It works, but when i close the popup, again with key 'enter', the popup comes again an again. I need to disable event 'click' of my button or unbind the trigger action when the popup is displayed.
I would't like to make my own modal windows.
thanks in advance.
You can move the handler to its own function and programmatically bind/unbind it to the event:
$(document).ready(function(){
var myButton = $('#mybutton')
console.log('whee');
myButton.click(clickHandler);
$(document).keyup(function(e){
if (e.keyCode == 13) myButton.trigger('click');
})
});
function clickHandler(){
$('#mybutton').unbind('click', clickHandler)
if ($('#myinput').val() == '') {
alert('input Empty!');
} else {
// More code.
}
}
However, it looks more like you're trying to deal with enter buttons in a form submission style. I'd recommend wrapping this whole thing in a form and dealing with it as such.
See http://jsfiddle.net/ruBY4/ for a cleaner form-based solution.
How can I tell using jQuery if an any element within a div (panel1) was clicked? I have this piece of code that I use to show/hide a popup:
$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else {
$('#panel1').hide();
}
});
The problem is that the popup (panel1) gets dismissed if I click on any control/element within panel1. I'd like to keep panel1 open unless an area outside panel1 is clicked (or if link1 is clicked again). How can I revise this code to achieve this? Thanks...
Try this
$('#panel1').click(function (e) {
e.stopPropagation();
//Other code if you want to execute anything on panel click.
});
$('body').click(function (e) {
if($("#panel1").is(":visible"))
$('#panel1').hide();
});
Make a following html markup:
<body>
<div id="div1">
... all the body content here
</div>
<div id="panel1">
</div>
I suppose the popup #panel1 is positioned out of normal flow anyway, so it is no problem.
Then in jquery use div1 instead of body and that's it :-)
$('body').click(function (e) {
if ($(e.target).attr('id') == 'link1') {
$('#panel1').show();
} else if($(e.target).attr('id') != 'panel1') {
$('#panel1').hide();
}
});