I have a single page application written using knockout/jquery. However, I am struggling to find a better way to handle what view to show. As i need more menu items you can see how the code will be more unmanageable. I would like to be able to show a view based on what is selected and change the CSS so you can see which tab is selected too.
<div class="col-md-2 sidebar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" data-bind="click: ShowDashboard, css: DashboardSideBarCss">
Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowCompanyDetails, css: CompanyDetailsSideBarCss">
Company Details
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEmployees, css: EmployeesSideBarCss">
Employees
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEtc, css: EtcCss">
etc....
</a>
</div>
</div>
use a single class/click for the view change-links and add a new attribute containing a "key" of your view, sth like:
<a href="#" data-view="dashboard" data-bind="click: changeContent">
in your changeContent function read the attribute and set it to a new observable e.g 'currentView'
sth. like:
vm.currentView($(this).attr('data-viewkey'))
(or however you are used to code)
you can then just show the correct content like:
<div style="display:none" data-bind="visible:vm.currentView()=='dashboard'" >
....
or you can toggle an 'activeclass'
data-bind="attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"
or add individual dynamic selectors
data-bind="attr:{class:'content_'+vm.currentView()}"
tl;dr introduce a new observable holding a "viewkey" on which everything is based on and you can do whatever you want
Related
I'm making a chrome extension and one of the features is to click on one of the items in the list code below.
<ul class="js-tweet-actions tweet-actions full-width ">
<li class="tweet-action-item pull-left margin-r--13 "> <a class="tweet-action " href="#" rel="retweet"> <i class="js-icon-retweet icon icon-retweet icon-retweet-toggle txt-center"></i> <span class="is-vishidden">Retweet</span> </a> </li>
<li class="tweet-action-item pull-left margin-r--13 margin-l--1"> <a class="js-show-tip tweet-action position-rel" href="#" rel="favorite" title="" data-original-title=" Like from ILoveTomFan "> <i class="js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center"></i> <span class="is-vishidden"> Like </span> </a> </li>
</ul>
How would I mimic a browser click on these elements, the code below is what I tried and it has no effect at all, it doesnt correctly click the element that is being displayed.
I have tried;
document.getElementsByClassName("js-show-tip tweet-action position-rel").click;
document.getElementsByClassName("tweet-action-item pull-left margin-r--13 margin-l--1").click;
document.getElementsByClassName("js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center").click;
var test = x[y].querySelectorAll("li");
test[2].click;
Thanks #Zevee specially the code that made this work was
x[y].querySelector('.js-show-tip.tweet-action.position-rel').click();
Your first three don't work because there is an array of elements and because classname only takes one class (iirc)
Try document.querySelector(<here, put every single class that you want to select seperated by dots (in a string)>).click()
Note that this selects the first element with all of those classes (iirc)
I had script setup to toggle show/hide divs on a page with menu items.
However I wanted to load external HTML into one of them and was running into issues.
Now I am wanting to just having the menu items load external HTML into a single div.
I can't seem to make it work though and I want to have a menu like this:
<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>
Each item loads a different HTML into a div like this using jQuery:
<article>
<div id="bodycontent">
...
</div>
</article>
If you want to add or means to say load external html then you need to add some java scrip.Let take your example.
<div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>
See I've added individual id to each now you need to call a load function of js
$("#homeTab").on('click',function(){
//firstly clear html part
$('#bodycontent').html('');
$('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});
That's it all done you can do like this.
Hope it will work for you.
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.
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");
So, I'm building a login system using a "numpad". There are four numbers on one row and for rows. One number per row should be selected and those should then be correct for a login. The "numpads" are like this, four rows, four numbers:
<div class="numbers-1">
<a class="num-1 active" href="#">1</a>
<a class="num-2" href="#">2</a>
<a class="num-3" href="#">3</a>
<a class="num-4" href="#">4</a>
</div>
<div class="numbers-2">
<a class="num-1 active" href="#">2</a>
<a class="num-2" href="#">3</a>
<a class="num-3" href="#">4</a>
<a class="num-4" href="#">5</a>
</div>
<div class="numbers-3">
<a class="num-1 active" href="#">3</a>
<a class="num-2" href="#">4</a>
<a class="num-3" href="#">5</a>
<a class="num-4" href="#">6</a>
</div>
<div class="numbers-4">
<a class="num-1 active" href="#">4</a>
<a class="num-2" href="#">5</a>
<a class="num-3" href="#">6</a>
<a class="num-4" href="#">7</a>
</div>
Here the numbers selected now would be 1 2 3 4 as the css class for these is "active". jQuery changes the classes. Is it possible to make python check if these are correct? In another words, is it possible to make python "if css class for certain links here is 'active' do something else don't"? Or how do you propose this thing to be done?
The thing looks like this online:
http://cl.ly/image/0T1y3l3I3h22
The code that would be executed if the correct numbers were selected would be just a redirect to the page requiring the login. The python would be this then:
def login():
if ...... # if the css class for the links is not whatever it should be
error = 'an error message'
else:
return redirect(url_for('the_page_requiring_login'))
The reason python would be nice would be that I'm using Flask for the site and this code above would be very convenient therefore.