I am using a script which someone assisted me with on stackoverflow. It works perfectly, however it does not work with my amchart in IE8-10 (I have logged this issue with amcharts too because the issue appears to be with the chart).
I would like to troubleshoot further myself in the meantime with jQuery script. I am still learning jQuery and need some guidance in converting the following javascript code to a jQuery show() hide() script.
I have tried it in it basic form:
$(window).load(function() {
$("div").hide();
};
It works in all other browser except IE 8-10 when you toggle the form the chart does not appear. Below please see exerpts of two scripts that work but in IE 8-10.
<script type="text/javascript">
function chart1() {
var show = ['chartdiv1', 'unit-price'];
for ( var i = 0; i < show.length; ++i )
document.getElementById(show[i]).style.display = "block";
var hide = ['chartdiv2', 'unit-price-value','chartdiv3', 'unit-price-rand'];
for ( var i = 0; i < hide.length; ++i )
document.getElementById(hide[i]).style.display = "none";
};
</script>
<script>
function chart1() {
document.getElementById("chartdiv1").style.display = "block";
document.getElementById("unit-price").style.display = "block";
};
function chart2() {
document.getElementById("chartdiv2").style.display = "none";
document.getElementById("unit-price-value").style.display = "none";
};
function chart3() {
document.getElementById("chartdiv3").style.display = "none";
document.getElementById("unit-price-rand").style.display = "none";
};
</script>
</head>
<body style="background-color:#FFFFFF; margin: 10px;" onLoad="chart1()"> or onload"chart1(), chart2(),.............
There seems to be a syntax error in your code.
Shouldn't the function be like this? :
$(window).load(function() {
$("div").hide(); //and not $("div">.hide();
}); // added the closing bracket of load function
Try this:
$(window).load(function() {
$("div").hide();
$("#chartdiv1, #unit-price").show();
});
On window load you just hide all the divs but it is still better to hide it with css. then just show the div with specific ids you want to show.
Related
to put it simply, I am trying to add a hover effect onto my cv.
I want when someone hovers over my linkedin icon, for it to display a text underneath saying "LinkedIn"
However I need this to be in Javascript.
html part <i class="icon-linkedin"></i>
<div id="popup">LinkedIn</div>
js part
var e = document.getElementById('liIcon');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
and css part
#popup {
display:none;
}
Any idea why it isn't working?
Thanks.
I noticed a few semicolons missing after the onmouseovers. I'm not an expert on JS, but an unterminated statement looks weird.
Also, I added a LinkedIn text to the button, cause there's no image link visible in the following code. This is how your code should be structured for your code to work (assuming your browser doesn't have JavaScript disabled):
<!DOCTYPE html>
<html>
<head>
<style>
#popup {
display: none;
}
</style>
</head>
<body>
<i class="icon-linkedin">LinkedIn</i>
<div id="popup">LinkedIn</div>
<script>
var e = document.getElementById('liIcon');
e.onmouseover = function () {
document.getElementById('popup').style.display = 'block';
};
e.onmouseout = function () {
document.getElementById('popup').style.display = 'none';
};
</script>
</body>
</html>
No hover:
Hover:
Sometimes selectors can get fussy, I've run into issues with tags nested in other elements similar to what you have here.
Have you tried adding an event listener to the icon tag as well?
var icon = document.getElementById('liIcon').getElementsByClassName('icon-linkedin');
// assuming there is only one element of class: icon-linkedin, access element by index 0
icon[0].onmouseover = function () {
document.getElementById('popup').style.display = 'block';
};
icon[0].onmouseout = function () {
document.getElementById('popup').style.display = 'none';
};
Im trying to figure out how to in wordpress display only first two comments and hide rest and add button that reveal all these hidden messages if needed. Pagination give me only two msg per page and thats not im looking for. Can someone give me an idea how I can this achieve or point me to articles about this?
Thanks
here is a plugin that should do the job: https://wordpress.org/plugins/comment-load-more/
It is a bit outdated (3 years ago) so you should check if the code is still valid and compatible.
In " Settings > Comment Load" you should be able to set the number of desired comments to show first.
Indeed, in this guide - http://www.wpbeginner.com/plugins/how-to-easily-lazy-load-comments-in-wordpress/ - you will find how to lazy load all comments. Probably, with some modification, you can adapt it to your need as well.
Cheers!
// This function hide comments if is there more than two and add show more button
function fds_comments () {
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 2; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "none";
}
commentWrap.innerHTML = commentWrap.innerHTML + "<button id='more-comments' onclick='fds_all_comments()'type='button' >Show all comments</button>";
}
//This function reveal all comments (used on SHOW MORE btn)
function fds_all_comments(){
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 0; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "block";
}
}
// problem: comments hidden after submit
// solved: This additional code reveal comments after SUBMIT
window.onload = function() {
var reloading = sessionStorage.getItem("reloading");
if (reloading) {
sessionStorage.removeItem("reloading");
fds_all_comments();
}
}
// function used on SUBMIT button
function fds_all_on_submit(){
sessionStorage.setItem("reloading", "true");
document.location.reload();
}
please refer to JSFiddle link: https://jsfiddle.net/s11oo2gg/.
We are not allowed to use jQuery and iframe here.
The problem right now if you click on resistor first and hover over different content images then come back out by clicking the X mark, the content image would get stucked where you left off and would not load the the other content images properly. It would show a broken image link.
I like to reload only the <div id="slider1_contain"> everytime I click on <span class="closeButton">(X mark) so the target content images can be loaded accordingly.
I dont not want to have location.reload(); to resolve this when the X is click. I dont want to reload the whole page but only the div.
I saw people were asking the same question and solve it with AJAX. Do I need AJAX for this case? Or is there something we can do in the following javascript?
Thank you in advance!!
<script type="text/javascript">
function showContent(target){
document.getElementById(target).style.display = 'block';
document.getElementById("boxThumb").style.display = 'none';
}
function hideContent(target){
document.getElementById(target).style.display = 'none';
document.getElementById("boxThumb").style.display = 'block'
}
</script>
<script type="text/javascript">
var children = document.querySelectorAll('.toggle > section[id]');
function showDetailContent(target) {
// Simply loop over our children and ensure they are hidden:
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
// Now, show our child we want to show
document.getElementById(target).style.display = 'block';
}
</script>
If you want to reload just the div, you can use innerHTML.
document.getElementById(target).innerHTML = '<img src="image.jpg">';
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
I am trying to write a PHP Java Script, but struggling to write in this section of coding.
I am trying to make a buttom in form in that opens
The code I have written so far is
function display(e){
if (e.clicked)
document.getElementById('2').style.display = 'none';
else
document.getElementById('2').style.display = 'block';
and the FORM CODE is;
<input type="button" value=" Book Now " onClick="display(this)"/></input>
any help to point out my clear mistakes would be great, the live code can be seen at
http://affordablecleaners.co.uk/quote/
Thanks,
Henry
Try something similar to the following
var i = 0;
var display = function() {
document.getElementById('2').style.display = (i++ % 2) ? "none" : "block";
};
Essentially, we're creating a variable i and increasing it by one every time the function is called. If, when the function is called, i is an even number, then we set it to display: block. Otherwise, set it to display: none.
The biggest downside to this solution is cluttering the global scope. If this is an issue, you can also do the following.
var display = function() {
document.getElementById('2').style.display = (document.getElementById('2').style.display == "none") ? "block" : "none";
};
Here's the (untested) logic...
function display(state, which){
if (state==1) {document.getElementById(which).style.display ='none';}
else
{document.getElementById(which).style.display = 'block';}
}
and then in your button...
to turn ON
onclick="display('1',someDIV)"
to turn OFF
onclick="display('0',someDIV)"