I have this bit of code that is working in FF, Chrome, Safari, and even IE9. Naturally, it doesn't work in IE8. It's a show/hide on two divs using Javascript. I'm not terribly proficient with JS so any help would be appreciated.
Javascript function :
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].getAttribute("class");
if (name == 'subscriberinfo') {
if (subscriberinfo[x].id == thechosenone) {
subscriberinfo[x].style.display = 'block';
} else {
subscriberinfo[x].style.display = 'none';
}
}
}
}
HTML code :
<ul class="options">
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo1');" >Account</a>
</div>
<div class="subscriber-options">
<a href="javascript:showonlyone('subscriberinfo2');" >Subscriber Options</a>
</div>
</ul>
<!-- options -->
<div class="subscriberinfo" id="subscriberinfo1">Div #1</div>
<!-- subscriberinfo1 -->
<div class="subscriberinfo" id="subscriberinfo2" style="display: none;">Div #2</div>
Instead of getAttribute("class") have you tried className?
function showonlyone(thechosenone) {
var subscriberinfo = document.getElementsByTagName("div");
for(var x=0; x<subscriberinfo.length; x++) {
name = subscriberinfo[x].className; // <-- Here is the change
if (name == 'subscriberinfo') {
subscriberinfo[x].style.display =
(subscriberinfo[x].id == thechosenone) ? 'block' : 'none';
}
}
}
Related
not sure the title makes sense, but I have the code bellow to hide/show some fields when we select a yes/no radiobutton
<div class="container" style="width:100%;margin-top:2%">
#if (Model != null)
{
using (Html.BeginForm("NextButton_Click", "Questionnaire", FormMethod.Post))
{
<table class="table table-hover">
<tbody>
#for (int i = 0; i < Model.QuestionsPaging.Count(); i++)
{
...
<tr>
<td>
<p>
#Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, false, new { #radioIndex = i, #onchange = "CallChangefunc(this)" }) #Html.Label("No")
#Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, true, new { #radioIndex = i, #onchange = "CallChangefunc(this)" }) #Html.Label("Yes")
</p>
<div id="div_questions_#i" style="display:none">
...
</div>
</td>
</tr>
}
</tbody>
</table>
}
}
<script type="text/javascript">
function CallChangefunc(myRadioButton) {
var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
var divElement = document.getElementById(divName);
if ($(myRadioButton).val().toLowerCase() === "true") {
if (divElement.style.display != 'inline') {
divElement.style.display = 'inline';
}
} else {
if (divElement.style.display != 'none') {
divElement.style.display = 'none'
}
}
}
</script>
The code works fine, I click the radiobutton and it hides/shows the divs as expected. The problem I'm having is that when I load the form it selects the RadioButton as expected but the event 'onchange' doesn't get triggered, so I have all fields hidden even with some radiobuttons set to yes.
I don't have too much experience in web, not sure how can I fix it, I've tried some stuffs but didn't work, any help is welcome.
Thank you.
Solution: Thanks #jom
I added " $(':radio[id^="QuestionsAnswers"]').trigger('change');" and checked if the radiobutton is checked, because ".trigger('change')" trigger the event for every radiobutton, now I have:
<script type="text/javascript">
$(document).ready(function () {
$(':radio[id^="QuestionsAnswers"]').trigger('change');
});
function CallChangefunc(myRadioButton) {
var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
var divElement = document.getElementById(divName);
if ($(myRadioButton).val().toLowerCase() === "true" && myRadioButton.checked) {
if (divElement.style.display != 'inline') {
divElement.style.display = 'inline';
}
} else if ($(myRadioButton).val().toLowerCase() === "false" && myRadioButton.checked) {
if (divElement.style.display != 'none') {
divElement.style.display = 'none'
}
}
}
</script>
Do this on either $(document).ready or before the closing </body> tag.
$(':radio[id^="QuestionsAnswers"]').trigger('change');
// Or attach the handlers by script instead of going through Razor engine
$(':radio[id^="QuestionsAnswers"]').change(function () {
CallChangefunc(this);
});
Add $(document).ready before function CallChangefunc(myRadioButton)
I am trying some thing with if binding from knockout. If value is true I want to show some text and if it is false, I want to show some different text, as given in the code.
When I am opening the page with this html, I am getting the expected results.
But when I am trying to get the result in phones and in kindle tab (working fine in wondows tab), it is not giving the results for the if binding I have used in html.
I tried removing '()' from failStatus and status in html, but it is not working. Is it any issue of binding or I am doing any thing wrong?
Thanks for any help.
function temp()
{
this.inviteeEmailList = ko.observableArray([]);
var emailList = {};
emailList['email'] = {'a#x.y , b#c.n'};
emailList['status'] = ko.observable();
emailList['failStatus'] = ko.observable();
this.showList = function()
{
for(var k in inviteeEmailList)
{
if(some_condition)
{
this.inviteeEmailList()[k]['status'](true);
this.inviteeEmailList()[k]['failStatus']("");
}
else
{
this.inviteeEmailList()[k]['status'](false);
this.inviteeEmailList()[k]['failStatus']("not exist");
}
}
}
}
<div id="foundEmail" data-bind="foreach : inviteeEmailList">
<span data-bind="if: $data.status()">
<span>Success</span>
</span>
<span data-bind="if:(!$data.status() && $data.failStatus()) ">
<span>hello world</span>
</span>
<div data-bind="text:$data.email"></div>
<div data-bind="if:!$data.status()">
<div data-bind="text:$data.failStatus()"></div>
</div><br/>
</div>
Instead of using if binding, I tried using visible binding, which worked properly for me.
Giving code below
function temp()
{
this.inviteeEmailList = ko.observableArray([]);
var emailList = {};
emailList['email'] = {'a#x.y , b#c.n'};
emailList['status'] = ko.observable();
emailList['failStatus'] = ko.observable();
this.showList = function()
{
for(var k in inviteeEmailList)
{
if(some_condition)
{
this.inviteeEmailList()[k]['status'](true);
this.inviteeEmailList()[k]['failStatus']("");
}
else
{
this.inviteeEmailList()[k]['status'](false);
this.inviteeEmailList()[k]['failStatus']("not exist");
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foundEmail" data-bind="foreach : inviteeEmailList">
<span data-bind="visible: $data.status()">
<span>Success</span>
</span>
<span data-bind="visible:(!$data.status() && $data.failStatus()) ">
<span>hello world</span>
</span>
<div data-bind="text:$data.email"></div>
<div data-bind="visible:!$data.status()">
<div data-bind="text:$data.failStatus()"></div>
</div><br/>
</div>
Does somebody know, how we can add the rel="nofollow" attribute to all links in the comments plugin from facebook.
<div id ="comments" style="margin-left: 510px; width: 550px" >
<div class="fb-comments" data-href="http://my.net/" data-width="550" data-numposts="5" data-colorscheme="light"></div>
</div>
</div>
window.addEventListener("load", func, false);
function func() {
var div = document.getElementById("comments");
var elements = div.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++)
{
if (elements [i].tagName == "a") {
elements[i].rel = "nofollow";
}
}
}
Array elements do not contain all tags that facebook adds in my .
if (elements[i].tagName.toLowerCase() == "a")
{
elements[i].setAttribute('rel', 'nofollow');
}
And you must paste your code after FB init, not on window.load.
I am having issues with the onclick event in both IE and Chrome. The click event will work well on the first implementation of it but any event after that is not recorded. I have checked the console in both IE and Chrome and they give me no information on any issues. I have pasted my code if you guys could take a look.
html
<div class="userChoice" id="userChoice">
<a class="fauxBtn" id="memberLink" onClick="userSelection(memberLink);">I'm a Member</a>
<a class="fauxBtn" id="nonMemberLink" onClick="userSelection(nonMemberLink);">I'm a Non-Member</a>
<a class="fauxBtn" id="studentLink" onClick="userSelection(studentLink);">I'm a Student</a>
</div>
javascript
function userSelection(userChoice){
var uC = userChoice.id;
var userChoice = document.getElementById("userChoice");
var memTest = document.getElementById("membershipTest");
var memFail = document.getElementById("membershipFail");
var memCosts = document.getElementById("memberCosts");
var nonMemCosts = document.getElementById("nonMemberCosts");
var studentCosts = document.getElementById("studentCosts");
var para = document.getElementById("preAmble");
if(uC == "memberLink"){
nonMemCosts.style.display = "none";
memTest.style.display = "block";
studentCosts.style.display = "none";
userChoice.style.display = "none";
}else if(uC == "nonMemberLink"){
nonMemCosts.style.display = "block";
memTest.style.display = "none";
studentCosts.style.display = "none";
userChoice.style.display = "none";
}else if(uC == "studentLink"){
nonMemCosts.style.display = "none";
memTest.style.display = "none";
studentCosts.style.display = "block";
userChoice.style.display = "none";
}
}
Any help would be useful. Thank you.
Okay Here you go: You had missing ID's in your Html...
http://jsfiddle.net/Z3XvL/3/
<div class="userChoice" id="userChoice">
<a class="fauxBtn" id="memberLink" href="javascript: userSelection('memberLink');">I'm a Member</a>
<a class="fauxBtn" id="nonMemberLink" href="javascript: userSelection('nonMemberLink');">I'm a Non-Member</a>
<a class="fauxBtn" id="studentLink" href="javascript: userSelection('studentLink');">I'm a Student</a>
</div>
<div id="membershipTest">This is membershipTest</div>
<div id="membershipFail">This is membershipFail</div>
<div id="memberCosts">This is memberCosts</div>
<div id="nonMemberCosts">This is nonMemberCosts</div>
<div id="studentCosts">This is studentCosts</div>
<div id="preAmble">This is preAmble</div>
I have some tables here, and using this javascript below, I made them hide and show every time a user click on their buttons. What I want to add in to this script, is when someone click on a table's button to show-up, all the other to be hidden. Any idea how can I do this? Thank you in advance!
This is my html code:
<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onClick="SC[1]();" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:dlock;">BLAH BLAH</div>
<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onClick="SC[2]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>
<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onClick="SC[3]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>
This is my javascript:
<script type="text/javascript">
var SC = [];
for (var i = 1; i < 10; i++) {
SC[i] = (function(i){
return function(){
var SC_TH = document.getElementById('SC'+i+'_TH_');
var SC_BSH = document.getElementById('SC'+i+'_BSH_');
var SC_BO = document.getElementById('SC'+i+'_BO_');
if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){
SC_TH.className = 'header_cl';
SC_BSH.className = 'show_button';
SC_BO.style.display = 'none';}
else {SC_TH.className = 'header_op';
SC_BSH.className = 'hide_button';
SC_BO.style.display = 'block';}
}})(i);}
</script>
EDIT: In other words, I need something to say, if this button that clicking right now is something all the other to be hidden!!!
Here's a working example with some very simple jQuery (recommended) code.
HTML:
<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>
<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>
<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>
JS:
$(function() {
$('div.toggle').hide();
$('.toggle-button').click(function(){
$('div.toggle').hide();
$(this).closest('table').next('div.toggle').show();
});
});
As #StephenByrne mentioned, I also strongly recommend using an existing component such as jQuery Accordian. It takes minutes to implement and comes with a whole host of themes to chose from and is fully customisable. You could spend hours or days writing your own. Unless it's a learning exercise, it's simply a waste of time. No need to reinvent the wheel.
As you have indicated a strong push towards js-only, here's a working js-only solution.
HTML:
<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onclick="toggle(this);" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:block;">BLAH BLAH</div>
<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>
<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>
JS:
function toggle(src) {
var id = src.id;
var index = id.substring(2, 3);
var i = 1;
var toggleItem = document.getElementById('SC' + i.toString() + '_BO_');
while (toggleItem != null) {
var bShow = index == i;
var button = document.getElementById('SC' + i.toString() + '_BSH_');
var table = document.getElementById('SC' + i.toString() + '_TH_');
if (bShow) {
toggleItem.style.display = 'block';
toggleItem.className = 'setitemclassname';
button.className = 'setbuttonclassname';
table.className = 'settableclassname';
}
else {
toggleItem.style.display = 'none';
toggleItem.className = 'setitemclassname';
button.className = 'setbuttonclassname';
table.className = 'settableclassname';
}
toggleItem = document.getElementById('SC' + (++i).toString() + '_BO_');
}
}
Inside the while loop when index == i evaluates to true, you know you have the item to show. Add extra logic there to change your class names.
A cleaner solution involves altering your HTML a bit as well - getting rid of the onclick and replacing it with a class (toggleItem) that will allow the javascript to identify the items to be toggled. I also make sure that all the buttons have the class button so they can be identified.
<table id="SC1_TH_" class="header">
<tr>
<td>
<div id="SC1_BSH_" class="button">*</div>OPTION ONE</td>
</tr>
</table>
<div id="SC1_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC2_TH_" class="header">
<tr>
<td>
<div id="SC2_BSH_" class="button">*</div>OPTION ONE</td>
</tr>
</table>
<div id="SC2_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC3_TH_" class="header">
<tr>
<td>
<div id="SC3_BSH_" class="button">*</div>OPTION ONE</td>
</tr>
</table>
<div id="SC3_BO_" class="toggleItem">BLAH BLAH</div>
Then in the javascript:
var buttons = document.getElementsByClassName('button'),
toggleItems = document.getElementsByClassName('toggleItem'),
tables = document.getElementsByClassName('header');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = getFunction(toggle, i);
}
// getFunction is needed for reasons to do with variable scope
function getFunction(f, p) {return function() {f(p)}}
function toggle(selected) {
for (var i = 0; i < toggleItems.length; i++) {
toggleItems[i].style.display = i == selected ? '' : 'none';
tables[i].className = i == selected ? 'header open' : 'header closed';
buttons[i].className = i == selected ? 'button show' : 'button hide';
}
}
toggle(0); // initially show only the first one
(This does assume that the buttons and toggle items will be in the same order. If that is not the case you will have to revert to checking their IDs or find some other way to associate the items and buttons.)
(EDITED to include changing class of tables and buttons)
Just hide all of them, then show the one that should become toggled open. This script is not the elegantest solution, but integrates directly in your coding style:
for (var i = 1; i < 10; i++) {
SC[i] = (function(i){
var SC_TH = document.getElementById('SC'+i+'_TH_'),
SC_BSH = document.getElementById('SC'+i+'_BSH_'),
SC_BO = document.getElementById('SC'+i+'_BO_');
return function(action) {
if (!action) action = SC_BO.style.display=="none" ? "show" : "hide";
if (action == "show") {
for (var i=0; i<SC.length; i++)
SC[i]("hide");
SC_TH.className = 'header_op';
SC_BSH.className = 'hide_button';
SC_BO.style.display = '';
} else {
SC_TH.className = 'header_cl';
SC_BSH.className = 'show_button';
SC_BO.style.display = 'none';
}
};
})(i);
}