I'm using bootstrap for pagination, here simplified code.
<div style="margin:20px 0px 20px 0px">
<ul class="pagination" style="display:inline">
<li>page 1</li>
<li>page 2</li>
</ul>
<span>ajax-loader</span>
</div>
<form>text fields, button for send msg</form>
Ajax loader looks fine, right after pagination buttons, but form's elements ignore my div and go right after my ajax loader(same line), like there is no div. Brake line(br) not working too, i don't understand why.
So i want:
"pagination-ajaxloader"
"other data"
I have:
"pagination-ajaxloader-otherdata"
I tried to use float for ajaxloader, but i want it near pagination from right side. Looking for some advise, thank you.
Related
I have two elements, a <button> and a <ul>. There are multiple of the button, and they all do the same thing. When you click a button, I want to move the ul to the button (aligned at the top right). The buttons don't have IDs.
The menu (UL) will be absolute positioned. They are not siblings/parents/children of each other. When you click the button, it calls a function. I hope this function can move the UL to the location of the button that you clicked.
HTML:
<button class="download" onclick="showDownloadMenu()"><i class="fa fa-download" aria-hidden="true"></i></button>
<ul id="download-menu">
<h1>Downloads</h1>
<button id="download-close-button" onclick="hideDownloadMenu()"><i class="fa fa-times" aria-hidden="true"></i></button>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
</ul>
JavaScript:
option 1 - this makes sense in my head... the right side of the menu equals the right side of the button..
downloadMenu.right = (clickedButton.right)+'px';
kind of works on buttons on the left...
but the buttons on the right go even further left, something is definitely wrong
option 2 - closest to working but instead of the right side of the menu aligning with the right side of the button, the left side of the menu is. these at least are consistant, but it's not in the right place.
downloadMenu.left = (clickedButton.right)+'px';
option 3 - not sure, but it was the last thing to try
downloadMenu.left = (clickedButton.left)+'px';
once again this is consistant, and even closer, but now the left side of the button and the left side of the menu are aligned.
so you'd think making it right/right would do the opposite, but as seen above thats not the case.
I did a quick fiddle, hope that is what you meant.
$('button').click(function(){
$('ul').insertAfter($(this))
})
button {display: block; margin-top: 20px;}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
<ul>
<li>xxx</li>
</ul>
I am trying to create a webpage with a menu on the left side and a content area on the right side. Mockup image below to give you an idea:
I am using jQuery UI to try to accomplish this. The goal is to have the content area on the right side to be set based on the menu item selected on the left. The area will always be a tabbed layout, but the content and amount of tabs will be different for each of the item selected from the left menu. Eventually, I want to integrate this into an ASP.NET MVC 5 app to include user authorization and roles affecting what menu items and tabs will be visible based on the logged in user. But for now, I am simply trying to get the tab menu to show up based on what I click on the left menu, and to show it specifically upon clicking one specific item. For the others, it will hide it again (I have not tried to implement the re-hiding yet, and that is not part of this question; I just want to get the initial show() to work).
So right now my approach is to hide the tabs on page ready, then use a function to display it when clicked, using the jQuery show() function. However, this doesn't work (tried in firefox and IE).
My attempt is at: https://jsfiddle.net/3mo28z1t/5/
In the fiddle, in the javascript section, if you change the "hide" to "show"
$("#tabsuseradmin").hide();
you will see the tabs menu, in case you want to get an idea of the layout before trying to fix the issue.
Specifically, I want the action of clicking on "Left menu item 3" to show the tabs.
Thank you.
I cleaned your fiddle up so that your scripts/css were in external resources. You must first define the target and then call the function with the target - you haven't targeted the individual tabs(i haven't done this for you either, i'm just pointing it out) Also you can't use show as a function name, as its reserved.
What i did do is create a toggle on the #leftmenu>li - see fiddle
$(function() {
$("#tabsuseradmin").tabs();
$("#leftmenu").menu();
});
$('#leftmenu>li').on('click', function(){
$("#tabsuseradmin").toggle();
});
$(function showTab(target) {
document.getElementById(target).show();
});
$(function hideTab(target) {
document.getElementById(target).hide();
});
#leftmenu {
display: inline-block;
}
#tabsuseradmin {
display: inline-block;
margin-right: 10px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<ul id="leftmenu">
<li>Left menu item 1</li>
<li>Left menu item 2</li>
<li>Left menu item 3</li>
<li>Left menu item 4</li>
</ul>
<div id="tabsuseradmin">
<ul>
<li>Tab first</li>
<li>Tab second</li>
<li>Tab third</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
<div id="tabs-3">
<p>Tab 3</p>
</div>
</div>
</body>
<li id="clicker" onclick="show('tabsuseradmin')">Left menu item 3</li>
$(document).ready(
function(){
$("#clicker").click(function () {
$("#tabsuseradmin").show();
});
});
Updated Fiddle
There is an error in your code. If you check console, it specifically says - show is not defined. Show & hide are methods provided by jQuery. They are not the same in javascript.
In your example you are using document.getElementById(target).show();, but .show is a jQuery method
you should use something like :
$(document.getElementById(target)).show();
$('#'+target).show();
You can also declare your event handler differently to avoid the problem seen in jsfiddle (that show is not defined), see my updated jsfiddle for that
As the title, I need to create an html tag and if the tag is hidden by the edge of the browser, it will automatically show back on the opposite side to no longer be hidden by the other. For example, it's like the options of facebook status:
http://i.imgur.com/RR8poBf.png
Because I don't know how to explain it to everybody to understand, so I had captured a photo here: http://i.imgur.com/SwpePxp.png
This is html content:
<div class="status-options">
<span class="status-options-list btn btn-default glyphicon glyphicon-chevron-down"></span>
<ul class="u-1">
<li>Option 1 aaaaaaaaaaaaaaaa</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
Any suggestions for a workaround?
I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!
I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle
I'm using the JQTouch framework for building an iPhone app/WebPage. I have it working nicely, but i cannot make it scroll to the bottom of the page.
<body>
<div class="current">
<div class="toolbar">
<a class="back button" href="javascript:{}">back</a>
<h1>header</h1>
</div>
</div>
<ul id="myContent">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div id="myInput">
...a couple of input elements..& submit button
that results in the "myContent" being updated with another li
</div>
</body>
Basically I have a UL at the top of my page, that gets updated/added to via server events coming in. This works nicely, but i want to be able to scroll to the "myInput" div which is at the bottom. However, I can't find a way of achieving this, I'm either using libraries incorrectly, or missing a trick. Any ideas?
Cheers
Have you checked the size of your webview? I had this issue but it was because I set my webview height to 480 (so it was off the screen due to the navigation bar)