change display property to visible flicks and disappears again - javascript

i have a php page that contains a table which i want to display only after clicking a link.
my problem is as follows:
i have a div that is set to display="none"
<div name="details" style="display:none;">
using a javascript, i change it to inline-table, or just block, doesn't matter for the case.
function showDetails(){
var elems = document.getElementsByName("details");
document.getElementById("dis").innerHTML = elems.length;
for (var i=0; i<elems.length; i++)
elems[i].style.display = "inline-table";
}
when i click the link that triggers this script, the div content is shown for a fraction of a second and disappears again..
here is a video of what it looks like:
http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi
i've checked some 5-6 pages of google links about changing display property, and of course checked stackoverflow, but found no relevant answers...
does anyone have a clue?
thanks in advance!
P.S. here is my full code:
http://codeviewer.org/view/code:299e

Remember that you are clicking an <a> tag, which is usually used for a link and they can send you to another page (that's exactly what's happening). Your href attribute is empty, so it's refreshing the page when you click it.
Try this:
show details
Notice return false;.
This will cancel the default action.

The name property is not supposed to be used like that (actually, it's deprecated and should never be used except for form fields). Change your code to:
<table class="details">
And use this to find them:
var elems = document.getElementByClassName("details");
Also, when setting the display property you should use "none" to hide an element and just an empty string to restore it to the browser default value (which can change from one browser to another):
elem.style.display = ""; // remove "none" value to make it visible.
The getElementByClassName feature doesn't exist in old browsers. A quick google search will find sample code to get it working in all browsers.
Also, #Lian is correct you should be returning false in the onclick.

your code in the link you provided says something different from what you posted here on SO. it says in the other code that you change visibility to visible only. Visibility is LOWER PRIORITY than display. If visibility is visible but display is still none, it means that the thing will still be invisible because display is still on none. You must totally forget about visibility and change ONLY the display none to a display block.

Related

Looking for custom script (capturing inner HTML using jQuery) in Adobe DTM data element?

I am trying to capture HTML text value using jQuery in custom script of DTM data element.
See the scenario:
Below is the snippet of code on the page:
<div class="site-categories">
<ul>
<li class="mobile-tablets main">
Mobiles & Tablets
Computers
Electronics
and so on.
So basically the ask is to capture the inner HTML text of anchor tag i.e. 'Mobiles & Tablets' or 'Computers' or 'Electronics', depending upon on what link, user clicks.
To achieve this, in the event based rule section, I have set Condition as the tag to fire when class (under div tag) equals 'site-categories' and enabled bubbling on child elements (so as to cover everything under this to fire omniture tag). And then assigning the value of data element in any evar variable.
In the data element section, after selecting the custom script option, I am writing this code:
var value = $('this').html();
return value;
or
var value = jQuery('this').html();
return value;
But this is not working. I even tried using this:
var value;
_satellite.setVar('value', jQuery('this').html());
return value;
But this also didn't worked. Can I have a solution for this ? I want this to be dynamic as in, depending upon which section user is clicking on the page, the data element should capture the inner HTML text of that particular anchor tag.
Not sure where I am going wrong.
If there is any other solution that exist for this, please let me know. That would be a great help.
Thanks in advance,
Adi
Couple of notes:
Firstly on a sidenote, in your jQuery code, this should not be wrapped in quotes. You should be passing an object reference to the jQuery wrapper. Wrapping it in quotes makes it look for an html element called "this" (e.g. <this>foobar</this>) which is not right.
As to your issue.. not sure how you have setup your rule but basically what you want to do is grab the value and put it into a data element, and then reference the data element when you set the Adobe Analytics variable. So it looks like you were on the right track, and BrettAHale's answer is on the right track too, but to put it all together:
In your rule, add a condition with criteria Data > Custom. Then click "add criteria" and in the codebox, enter in:
_satellite.setVar('linkText', jQuery(this).text());
return true;
This will set a data element named "linkText", and you return true to make sure the condition is always true. You can use "value" as the name but you should use something more descriptive so you can more easily remember it's purpose later (I used "linkText").
Then, in your Adobe Analytics section of the rule, go to the eVars section and select the eVar you want to set. Then for the "set as" value, enter in %linkText%. This is a reference to the data element you just set in the rule. Don't worry if DTM shows a tooltip saying not found or w/e; it only shows/searches for known data elements you set in the interface, not on-the-fly in rules. Click the "save evar" button and you should see e.g. eVar3="%linkText%" listed (but for whatever eVar you chose).
Save and then test/publish the rule.
In the analytics tool section or your rule, set the eVar using the following, not a data element.
%this.text%
Your evar box will show something like this. eVarX="%this.text%"

javascript resets the css value after a href onclick

this is the html line where i call the function:
Oranges
and this is the javascript:
function showMe (whichClass) {
var fruitShow = document.getElementsByClassName('fruit')[whichClass];
fruitShow.style.display = 'inline';
}
it works when i click the link and displays the fruit but it disappears. When the site loads the fruits are all set to display: none, i'm not sure if its reverting back or something else is going on. I have also tried using return before the function call (return showMe(1);)
Clicking the link triggers a reload of the page. Passing an empty value to href is equivalent to using the URL of the current page.
There are a couple of ways to prevent the page from following the link:
Change the href value to "#". This will make the page jump scroll to the top though, so you probably have to do the next option either way.
Stop the default behavior via event.preventDefault(). The default behavior is to load the URL. You can prevent that via the event object:
onclick="event.preventDefault();showMe(0)";
(note: while this works, there are better ways to bind event handlers)
Better yet: Don't use a link (since you don't link to anything), use a <button> instead. You can style it anyway you like with CSS.
Try changing your anchor href from "" to #.
replace
Oranges
with
Oranges
Or this
Oranges
change to this (prevent jumping)
Oranges
Just to have a tip more, but as already pointed out, using a button on this situation is a better solution.

JavaScript toggle button only works on second click if display attribute is in header

I came across an interesting quirk, and was wondering if anyone could help me understand it. A simple JavaScript-driven toggle button, as below, works beautifully if the display:none of the toggled element is contained in-line. However, when I move the CSS statement to the <style> tag in the header, or to a separate CSS file, it starts to toggle only on the second click, and from then on, it works fine, on a single-click-per-toggle basis. Here's the JS function:
<script>
function openSec(ordinal) {
var tab_name = "sec" + ordinal;
if (document.getElementById(tab_name).style.display == "none") {
document.getElementById(tab_name).style.display = "table";
} else {
document.getElementById(tab_name).style.display = "none";
}
}
</script>
When the CSS statement is in the style tag, it no longer exists as an attribute of the DOM element that is getting clicked. The browser is still applying the style, but the DOM element no longer has that value as a style attribute. So the first click, there is no display:none, so it adds it, then on the second click it replace it with table.
Use your browser's dev tools (or something like Firebug) to examine the initial HTML, then examine it again after the first click and I think you will see a difference.

How do you reset a button from "clicked" to "unclicked"

I have tried things like the following, but to no avail. (I am a novice programmer, so be nice.)
document.getElementById('Button1').clicked = false;
document.getElementById('Button1').value = false;
document.getElementById('Button1').value = document.getElementById('Button1').defaultValue;
Use CSS to do this, you could use CSS visited property to show if the link is clicked
Normal buttons do not behave this way. Links do, but not buttons. I'm thinking anything that has an ID of 'Button1' in Your page is actually a link Some Text, that has a CSS style (or none at all) making it appear differently once You clicked it at least once, am i right?
If so, You don't need javascript for now. You should create (or edit an existing) CSS sheet, and style your "Button1" in it. How to do it? Read here

JavaScript visibility not working ('hidden' works, 'visible' doesn't)

I'm developing a solution using Lombardi Teamworks BPM Tool .. The tool itself generates the client-side source code, but I can put in code using JavaScript, such as adding onChange code for combo boxes ..
Anyways, I have a button whose visibility I'm trying to toggle using JavaScript. I am able to hide a button using hidden, but I cannot unhide a hidden button using visible.
Here's the full code:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest");
}
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
eleBtnVisibilityTest.style.visibility = "visible";
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
In the second last line, I'm setting the button to visible, but it's doesn't work ... However, if the button was previously visible, and I had written hidden here, it would've worked.
For both cases, in the alert before setting the visibility, the pop-up I get says --><-- .. In the popup after setting visibility, its either -->visible<-- or -->hidden<-- ..
Any ideas ?
Try using the CSS display property:
display: block;
display:none;
document.getElementsByName returns a NodeList, you must select an item from that list:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest")[0];
}
But however, when setting the visibility to hidden works, this actually is not the problem here.
You should provide more details, because your code works when used with getElementById
http://jsfiddle.net/doktormolle/4mhBk/
Not sure what you mean by "but it's doesn't work" - do you mean that the button stays invisible?
It could be that the button is hidden by other means than the CSS visibility property. Maybe it also has display: none? In that case, setting the visibility property would not make the button become visible. Use a tool such as Chrome's inspector to check if that is the case.
Post a code snippet at JSFiddle, so we can see the code in action.

Categories