I'am having a problem with jQueryUi Tabs. I want to have a navigation bar at the left side of my tabs view, but the layout is not working. I think it is a bug, and I will report it to jQuery, but first I want to see if you can confirm this to be a bug, or am I doing something wrong?
Preview my example at [ http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html ].
First you see the non-working tabs example and below the working standard floating div example.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Tablayout problems</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="tabs"><ul><li>A tab page</li></ul>
<div id="a1">Do you see a red bar left of this tab view?</a></div>
</div>
<div style="float:clear"></div>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="no-tabs"><ul><li>A tab page</li></ul>
<div id="a2">Do you see a red bar left of this tab view?</a></div>
</div>
</body>
</html>
The solution here fixed my issue, which looks somewhat like yours. Look at
jquery ui tip floated divs inside for more information.
#yourTabsDiv {
float:left;
width: 100%;
}
Related
hi we are working on jquery mobile how to hide button with css not with code we are using display:none in style but its not working for jquerymobile
here is the code we are using
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Buttons</h1>
<button data-role="button" style="display:none;">hello</button>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
The easiest way is to wrap your button in a DIV and then just hide/show it.
<div style="display:none;">
<button data-role="button">hello</button>
</div>
<style>
#pageone .ui-header > .ui-btn{display:none;}
</style>
First, Try editing the property like "display: none !important".
If its not worked yet, then Check whether you had declared "display: block !important;" property for buttons.
(or)
write individual style in internal /external stylesheet like,
#pageone .ui-header > .ui-btn { display:none !important; }
If you want to move with code, change "display: none" to visibility: hidden
or
$( ".target" ).hide();
This is roughly equivalent to calling .css("display", "none"), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
I used below code for dragging and resizing the image,
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$( "#img_content" ).draggable().resizable();
});
</script>
</head>
<body class='default'>
<div class="demo">
<!--<div id="img_content" class="ui-widget-content">
<p>Drag me around</p>
</div>-->
<img id="img_content" class="ui-widget-content" src="Tulips.jpg" />
</div>
</body>
</html>
resizable is working corretly. but dragging the image not working. if i applied for div structure
<div id="img_content" class="ui-widget-content">
<p>Drag me around</p>
</div>
its working fine.
How do i implement drag and resize for image tag?
You should wrap the image into a div with style="display:inline-block; and then make the div draggable and the image resizable.
Working Example
The solution I've found was resizing/making dragable a with a background image. I guess that the element is not draggable and resizable.
Well, it works for me.
Bye.
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
Couldn't find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that's not the case here.
Problem:
I have with classes 'active', and 'inactive'.
On inactive - the list item will have a background image 1
on active - hte list item will have background image 2
<ul>
<li class="active"><a></a></li>
<li class="inactive"><a></a></li>
</ul>
On click, it's supposed to switch them right... example code:
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
With JQUERY MOBILE this code doesn't work, I've tried adding the class first, then removing... also tried toggleclass for the active.
If I removing jquery mobile from being included, it works perfectly.
Add jquery mobile library back in, doesn't work.
Not a css problem.
Upon inspection with firebug, it seems removing classes works find, it's when it tries to add it?
This works:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<style type="text/css">
.inactive {color:red;}
.active {color:blue;}
</style>
<script>
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
$('ul li.active>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('active').addClass('inactive');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>index.html</h1>
</div><!-- /header -->
<div data-role="content">
<ul>
<li class="active"><a>One</a></li>
<li class="inactive"><a>Two</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
What am I doing wrong here? I'm trying to get started with jQuery UI tabs.
Right now it's not working.
I thought I'd use the Google version so that it would be cached.
I'd like to find where Google has ui.tabs.js as well.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
$("#myTabs").tabs();
});
</script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
</head>
<body>
<ul id="myTabs">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</body>
</html>
You need to enclose all the tabs in the same continer:
<div id="myTabs">
<ul>
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</div>