Bootstrap nav-collapse toggles once - javascript

I have a collapsible menu on a website I'm developing, but the collapse is only toggling through once. I click "MENU" the menu expands, click it again, the menu closes, but won't continue toggling.
Here is a link to my development server. Just resize the browser window until the "MENU" button shows up and click it.
http://www.corporateprdev.com/ymcakpt
Here is my menu structure:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
MENU
</a>
<a class="brand" href="/ymcakpt/"><img src="/ymcakpt/themes/responsive/images/y-nav-collapse.png" alt="YMCA::Home" longdesc="images/y-nav-collapse.png" align="left" style="margin-right: 15px;"></a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
<a href="/ymcakpt/index.php/about/" >About</a>
</li>
<li>
<a href="/ymcakpt/index.php/membership/" >Membership</a>
</li>
<li>
<a href="/ymcakpt/index.php/schedules/" >Schedules</a>
</li>
<li>
<a href="/ymcakpt/index.php/contact-us/" >Contact Us</a>
</li>
</ul>
<form class="navbar-search pull-right" action="/ymcakpt/index.php/search/">
<input name="query" type="text" class="search-query" placeholder="Search" style="padding: 2px 8px; margin: 0; width: 210px;">
<input name="Submit" class="submit" type="image" src="/ymcakpt/themes/responsive/images/go-btn.png" value="Go" style="width: 35px; height: 25px;">
</form>
</div><!--/.nav-collapse -->
</div>
</div>

The problem in your case is a collision between two JavaScript files, namely bootstrap-transition.js and ccm.app.js. They are both writing to the jQuery variable $.support.transition. Bootstrap requires that to be an object which includes the property end which contains the browser specific event which is fired at the end of a CSS3 transition. The other file is overwriting the support.transition to only be a boolean.
When the hide method is called, transitioning is set to true and because the name of the event which signals the end of the transition is undefined, the transitioning property never gets reset to false. This causes any future calls to show or hide on the Collapse plugin to short-circuit.
You could try modifying the ccm.app.js to be compatible with Twitter Bootstrap's Transitions plugin. Simply adding a check to not overwrite existing values might suffice.
Another option is trying to ensure that bootstrap-transition.js is loaded after ccm.app.js. As long as ccm.app.js is only looking for truthy values, you should be good.

I had the same problem it was caused by double including of javascript files.
I did include my library javascript files twice, when I removed the repeated ones, it is working well.

Related

How can i use applescript to move from tabs in web page's form window?

im trying to do a basic applescript that move from one tab to another in a web page form. But can't find the right way and im asking for help.
This is the web page (part) code:
<div class="modal-body">
<div id="formContainer">
<input type="hidden" id="impuestosValida" value="0">
<input type="hidden" id="infoAduaValida" value="1">
<input type="hidden" id="cuentaValida" value="1">
<form id="formularioConcepto" novalidate="novalidate" method="post" data-title="Concepto">
<div id="advertenciaConceptos" class="alert alert-warning" style="display:none;">
<strong>¡Advertencia!</strong>
<span></span>
</div>
<ul id="tabsConcepto" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tabConceptos" onclick="validaEdicion(this);">Concepto</a></li>
<li><a data-toggle="tab" href="#tabImpuestos" style="" onclick="deshabilitaBotonAceptar();">Impuestos</a></li>
<li><a data-toggle="tab" href="#tabInfoAduanera" style="display:none;" onclick="deshabilitaBotonAceptar();">Información aduanera</a></li>
<li><a data-toggle="tab" href="#tabCuentaPredial" style="display:none;" onclick="deshabilitaBotonAceptar();">Cuenta predial</a></li>
</ul>
Im trying to do with "do JavaScript", but at this point, im now just guessing with something like this:
tell application "Safari"
activate
do JavaScript "document.getElementById('formContainer').childNodes[0].click()" in document 1
end tell
Any ideas? Really appreciated.
I can’t tell because I don’t see the whole HTML, but I assume you’re trying to click the li tags under the "tabConcepto" ul which would change the tab.
In that case you should change the javascript line to:
do JavaScript "document.getElementById('tabsConcepto').getElementsByTagName('a')[0].click()" in document 1
Change the 0 to which number tab you want to active. Remember to turn on "Allow JavaScript from Apple Events" under Safari’s Develop menu to allow this to run.

Bootstrap dropdown selection makes screen jump

So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>
To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.
If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.
When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".
If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.
For example, clicking on:
Data
Will cause the page to jump to:
<div id="graphOneData"></div>
To stop this happening, either change the id of the div or the href of the anchor.

Can you change a link title by named title attribute?

I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");

RobotFramework/JavaScript automated tree checkbox click and icon check with various tree element id

I have dynamically generated tree html code like below:
<div class="treeDiv">
<ul id="tree" class="ztree">
(...)
<li id="tree_115" class="level2" treenode="">
<button id="tree_115_switch" class="level2 switch bottom_open" treenode_switch="" title="" type="button"></button>
<button id="tree_115_check" class="chk checkbox_false_full" onfocus="this.blur();" treenode_check="" type="button"></button>
<a id="tree_115_a" class="level2" title="myItem" style="" target="_blank" onclick="" treenode_a="">
<button id="tree_115_ico" class="ico_open" treenode_ico="" title="" type="button" style="background:url(./images/icon.png) 0 0 no-repeat;"></button>
<span id="tree_115_span">
myItem
</span>
</a>
<ul id="tree_115_ul" class="level2" style="display:block"></ul>
</li>
</ul>
</div>
And i have to automate setting true various checkboxes (in this case tree_115_check) and after that and after clicking OK button on this page and some operations, i have to check whether icon.png changed to OK.png. I have to reffer to object by its name, because before executing test i will know myItem name, but i won't know which element of the tree it will be. Do you know how to do that using RobotFramework or JavaScript? It will be simple, if i will know ID of all checkboxes, icons, etc, but how to do that when it is various and I know just, that i have to find "myItem" element of tree, its checkbox and status icon?
Thank You in advance for your support.

issue with jquery external linking

I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help

Categories