I am not experienced with Javascript coding. However, I am willing to learn.
I came across some tutorials for creating collapse/expand <div> blocks. I have tested the code with jsfiddle. You can check the code here
It works fine, disregard the styling.
However I can't figure out why the code doesn't work on the live website.
At first I have inserted all the code javascript and HTML in the WordPress Page editor. Then , I moved the javascript in the header. I saw something about the source of the code. I am not sure which is the source.
Here is the javascript code inserted in the header.php:
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "expand";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for (i = 0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
</script>
The HTML code is the same as on the fiddle HTML panel and it I display in a WordPress page.
Please tell me what wrong with this code? Is it the source of the javascript code?
Chrome console gives me the following:
Uncaught ReferenceError: toggle2 is not defined example.com:103
onclick
The big question is why the code works fine on jsfiddle either on mootools or jquery frameworks, and it doesn't work on the live site?
UPDATE:
I have updated the script tags. Still doesn't work.
You need to put your Javascript code in its own tags.
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
<script type="text/javascript">
YOUR CODE HERE
</script>
Also, since you are using jQuery you need to use the ready() function like this:
$(function(){
YOUR CODE HERE
});
Click
<div id="d1">Some content to hide</div>
In the head:
<script type="text/javascript">
$(document).ready(function(){
$("#clickme").toggle(function(){
$("#d1").show();
},
function(){
$("#d1").hide();
}
);
});
</script>
And of course, leave the reference to jQuery in the code.
You have some problems:
An overlaping script tag
You are using Mootools in your Jsfiddle, and jQuery in this sample
You include jquery, but then do the animation in plain Javascript
Try this, correcting the script tags:
<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js"></script>
<script type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if (ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "expand";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for (i = 0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
</script>
Related
I know this has been covered extensively as separate issues; I've tried copying verified answers, but I'm having trouble homologating Javascript conditional statements and a link URL change.
Essentially, what I need to do is detect mobile users and change a conference call URL to a tel link. I've been using if (screen.width <=699) { as the condition and it works on redirects. Here's what I've tried:
<script type="text/javascript">
<!--
var call=document.getElementByID('phone');
if (screen.width <= 699) {
call.write('<a href="tel:!PHONENUMBER!">');
else
call.write('<a href="!URL!" target="blank">);
}
//--!>
</script>
</head><body>
...
...
I've also tried these with corresponding else statements to no avail:
no var and document.getElementByID('phone').write
onclick = function() { window.location.href ='tel:!PHONENUMBER!};.
call.src.replace('tel:!PHONENUMBER!');
call.setAttribute("href",'tel:!PHONENUMBER!');
I apologize if this is a super basic issue - I'm still learning Javascript. Thank you in advance.
Will
You need to either wait for the page to finish loading before you execute your JavaScript or move your script block to the bottom of the HTML.
If you want to wait for the page to finish loading, then wrap your code in the following:
window.onload = function () {
// your code goes here
}
Figured it out with help from #sepbot.
<body onload="mobileURL()">
<div id="phone"></div>
<script type="text/javascript">
function mobileURL() {
var a = document.createElement("a");
a.innerHTML="!LINKTEXT!";
var myPhone = document.getElementById('phone');
if (screen.width <= 699) {
a.setAttribute('href', '!TELEPHONE!');
myPhone.appendChild(a);
} else {
a.setAttribute('href', '!URL!');
myPhone.appendChild(a);
}
}
</script>
Trying to hide an element (class of "input-container") with a specific class unless a specific URL parameter is present. Have worked out the following code, but can't seem to get it to work. The if/else statement has been tested using alerts, so I know that portion is working. It's where I'm trying to assign the display variable where the code seems to be breaking. Unfortunately, I have to do this using the class name rather than an ID. Thoughts?
<script>
var isadmin = document.getElementsByClassName("input-container");
if (window.location.search.indexOf('admin=yes') > -1) {
isadmin[0].style.display = "block";
} else {
isadmin[0].style.display = "none";
}
</script>
Your code seems alright. I wonder why is not working. Anyway I would try this
<script>
var isadmin = document.getElementsByClassName("input-container");
var url = new URL(window.location);
if (url.searchParams('test') && url.searchParams('test') == 'yes') {
isadmin[0].style.display = "block";
} else {
isadmin[0].style.display = "none";
}
</script>
As it turns out, it was an issue between the seat and the keyboard. I'm an idiot and didn't realize that the Javascript was executing prior to the elements loading. Fixed the issue with the following code...
<script>
window.onload = hidePass;
function hidePass() {
var isadmin = document.getElementsByClassName('input-container')[0];
if (window.location.search.indexOf('admin=yes') > -1) {
isadmin.style.display = "block";
} else {
isadmin.style.display = "none";
}
}
</script>
I am a fairly new programmer, and currently am trying to understand OOP from the JS side of things. I have some pretty basic code for a flashing cursor, yet for some reason it isnt working. The page loads, and the cursor just appears onscreen with no changing. The code is below:
<html>
<head>
<title>Cursor</title>
<script src="jquery.js"></script>
<script>
var str = null;
var counter = 0;
var flipFlop = function() {
alert("working");
if(counter === 0) {
document.getElementbyId('console').style.visibility='visible';
counter = 1;
}
else if(counter === 1) {
document.getElementbyId('console').style.visibility='hidden';
counter = 0;
}
else {
//debug alert
alert("function broken.");
}
};
var setIntOnload = function() {
setInterval(function() {
flipFlop();
}, 1000);
};
</script>
</head>
<body onload="setIntOnload()">
<div id="console">
|
</div>
</body>
</html>
Not sure why this isnt working... Help would be appreciated :)
PS First Post :D
Its Working
Change getElementById instead of getElementbyId
Fiddle
You have a typo in your code. Use getElementById instead of getElementbyId. JavaScript variable names (and methods) are case sensitive.
Fiddle: http://jsfiddle.net/FcrQ7/
Always check your browser console in case something in your code is not working. You had the following error:
Uncaught TypeError: Object # has no method 'getElementbyId'
I've spent the last few hours trying to find the answer to this, but nothing seems to work...
I need to execute a piece of code when a div (or anything inside of it; including iframe content) is clicked. The following code should do it (when added into the div tag), but it doesn't seem to work.
onclick="if(typeof(_vis_opt_top_initialize) =='function'){ _vis_opt_goal_conversion(200); _vis_opt_pause(500);}"
The purpose is to execute a custom conversion goal:
<script type="text/javascript">
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
</script>
Any help will be greatly appreciated :)
I hate using inline js... hate it...
If you need to account for IE (<8), then you can't use addEventListener, so you can do something like this:
function bindListener(el,eventName,eventHandler) {
if (el.addEventListener) { // Anything but IE <8
el.addEventListener(eventName,eventHandler,false);
} else if (el.attachEvent) { // For IE <8
el.attachEvent('on'+eventName,eventHandler);
}
}
Then you can call it using something like this:
var ele = document.getElementById('idOfElement');
bindListener(ele, 'click', functionToCall);
Try using addEventListener. Link here. The Example on that page is exactly what you are asking for.
First give your div a unique ID
<div id="yourDivID"></div>
then set the onclick function in window.onload
var yourDiv = document.getElementById("yourDivID");
yourDiv.onclick = function() {
if(typeof(_vis_opt_top_initialize) == "function") {
_vis_opt_goal_conversion(200);
}
}
}
I write simple example for you:(j Query answer)
Html Code
<div class="test">Click</div>
JavaScript Code
$('div.test').click(function(){
alert("some");
});
Demo
Edited
JavaScript example
<html >
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>
<body>
<div>click</div>
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
</body>
</html>
I have 5 scripts on my page and I’d like to add them altogther but am not too sure how.
The first is
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
With the below since I've added the stock control message change, the reload doesn’t work. I’ve added a no conflict script but I don't think I've added it correctly. I'd like to put all 5 scripts together (above and below) in one tag that works - can anyone help out?
<script language="JavaScript">
//
function ImageLoadFailed() {
window.event.srcElement.style.display = "None";
}
// reload after adding product
function AddProductExtras(){
document.location.reload(true);
}
// for stock control - change message
function AddProductExtras(catalogId,productId,ret) {
var td = document.getElementById('catProdTd_'+productId);
if (td.innerHTML == 'This product is unavailable or out of stock.')
td.innerHTML = 'Product added successfully.';
}
jQuery.noConflict();
</script>
create one js file and in that paste all your 5 script codes.
And include this javascript file on your index page as:
<script type="text/javascript" src="name.js"></script>
try to call it in a new js page and link it to your main page.
<script type="text/javascript" src="file.js"></script>