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.
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 fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
When I try to make a dropdown for some odd reason when its clicked the dropdown menu displays off the page and I cant even see it in my actual website but JSFIDDLE shows it off the screen. Here is the JSFIDDLE where I was testing.
Click here for JSFIDDLE
Here is what I am currently doing.
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">Applications<b class="caret"></b></button>
<ul class="dropdown-menu">
<li>My Applications</li>
<li>Staff Dashboard</li>
<li>Apply</li>
</ul>
Thanks for the help in advance.
There are some problems in your code.Like missing div, tabindex etc.I fixed it up and check whether it helps you-
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown">Applications
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
My Apllications</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
Staff Board</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply
</a>
</li>
</ul>
</div>
Working fiddle- http://jsfiddle.net/vashuStrPro/6p0ux8st/
You need a parent element with the position property not set to static, i.e. to either relative, absolute, or fixed. The dropdown is using an absolute position with top:100%, so if there is no parent item with a position set, then it will use the window element as its reference, hence why it opens at the bottom of the page. Just set the immediate parent of the <ul> to have the position set.
Check out the updated jsfiddle.
In my Application one of div has scroll property.Inside div,I templated table with more than 100 rows.user can add/delete rows with contextMenu
contextMenu has 4 options names are AddTop,AddBottom,Delete and Edit.The thing is here If user right click on any row,contextMenu should be stick to that row even If user scroll the table.Right now It's not happening.
I written following code for contextMenu.
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu-r" role="menu" aria-labelledby="dropdownMenu">
<li id="addTop"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-top"></span> Add Top</a></li>
<li id="addBottom"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-bottom"></span> Add Bottom</a></li>
<li id="delete"><a tabindex="-1" href="#"><span class="new-icons new-icons-delete"></span> Delete</a></li>
<li id="edit"><a tabindex="-1" href="#"><span class="new-icons new-icons-edit2"></span> Edit</a></li>
</ul>
</div>
once user rightclick on any row of the table.following function will run.
var domEle=document.getElementById("contextMenu"),
xPosition=event.pageX,
yPosition=event.pageY;
domEle.style.display="block";
domEle.style.left=xPosition+"px";
domEle.style.top=yPosition+"px";
After completion of the following function,contextMenu coming untill it's fine.The problem is If I scroll contextMenu not sticking to that particular position.
I hope,you guys understand What I am trying to explaining.
can anyone help me.
Thanks.
Try implement your code with something like that:
http://www.pixelbind.com/make-a-div-stick-when-you-scroll/
I am using bootstrap version 2.0
I have the following html structure -
Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
Here's the updated fiddle with the correct bootstrap version and the attribute removed.
Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.
The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.
I faced same problem with bootstrap framework and at the end got the solution (worked for me).
Import all your required javascripts, mainly jquery.js .
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.