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/
Related
Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div
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 have simple Bootstrap 3 toggle navigation :
<ul class="nav navmenu-nav clearfix" >
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
test 1
</li>
<li class="clearfix">
test2
</li>
</ul>
</li>
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
Test 3
</li>
<li class="clearfix">
Test 4
</li>
</ul>
</li>
</ul>
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Bootply Link
I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies:
you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie
Now give an id to all of your dropdowns link
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
add an event listener to get the id of the dropdown link being click:
just like it is done here: get id of item clicked
store the value in a variable known as myVariable
$.cookie('cookieName', 'myVariable');
you can set expiry date
$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day
in the other page, you read the cookie and store it in new variable:
newVariable = $.cookie('cookieName');
use that variable for your dropdown to be enabled
$(newVariable).dropdown('toggle');
Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link
here is my issue:
(Please bear with me if that is easy/stupid question, I am new to Angular :) )
I am loading a page with angular where I have 3 tabs (and so 3 contents) which are using the tabs.
So when I land on my page, all the three tabs and content are generated.
My problem is that when I click on a different tab, the link matches the route, and I guess go back to the controller and render the view again.
My thoughts about this issue is to disable the view when I go to my controller the second time, but can't find any way of doing that.
As said, I am kind of new on angular, so if you think I should do things differently, any comments are welcome :)
Here is my view:
<div class="bs-example bs-example-tabs">
<ul role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">
<a role="tab" data-toggle="tab" href="#tab1">tab1</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab2">tab2</a>
</li>
<li class="" role="presentation">
<a role="tab" data-toggle="tab" href="#tab3">tab3</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in" role="tabpanel">
<div ng-include src="'/path/includes/tab1.htm'"></div>
</div>
<div id="tab2" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab2.htm'"></div>
</div>
<div id="tab3" class="tab-pane fade" role="tabpanel">
<div ng-include src="'/path/includes/tab3.htm'"></div>
</div>
</div>
And here is where I catch the route in the controller:
.when('/url/:intUserId?', {
controller:'ViewApiCtrl',
templateUrl: '/path/view-api.htm',
})
Let me know if I should post more info about my code !
Thanks a lot
EDIT
Basically I don't want to only return the content of one tab only, or just display one tab at a time.
For this example here, my 3 tabs are one big form, with some inputs on the 3 different tabs.
So it doesnt matter on what tab the user is, he can change a field on one, switch tab, click on save on the second tab and it will save the whole form.
What I am looking for is something like, when I switch tab, let bootstrap handle the display, and I want Angular to not doo anything ( so if it goes to the controller, exit it straight away and dont render/reload the template).
Thanks Michel for the tips, I think it will be useful on my other pages with tabs that are not really linked to each other (I can load one without the others), but for this particular case, I don't think it will suit me :(
On php using Zend Framework, I used to do it that way if that helps:
Zend_Layout::getMvcInstance()->disableLayout();
$this->_helper->viewRenderer->setNoRender( true);
Okay, so with your latest edit, with bootstrap you can do that, and with angular-ui as well!
Just put your tabs inside the form and when you submit all the data is submitted as well!
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.