Is there no way it's possible to have the tabs and the content panes in two separate containers using jQueryUI tabs?
I have this layout:
+--------------+--------------------------------------------------------+
| A | B |
| Link | Tabs |
+--------------+--------------------------------------------------------+
| C | D |
| | |
| <- Animate ->| Content panes |
| | |
| | |
| | |
| | |
| | |
+-----------------------------------------------------------------------+
Clicking the link collapses C-container and thereby expanding D-container with the tabs panes. I would much prefer designing my html something like this:
<div class="top">
<div class="left" /> <!--A-->
<div class="right" /> <!--B (tabs ul goes in here) -->
</div>
<div class="bottom">
<div class="left" /> <!--C-->
<div class="right" /> <!--D (content panes goes in here) -->
</div>
but that'll throw a "mismatching fragment identifier" error from jQueryUI Tabs.
Is there no work around?
Because of theming and design constraints this isn't possible with jQuery UI Tabs.
but you can achive this as shown in this example
Related
I have a comments column and the comments added to release are stored as rich text in comments column. Now i'm trying to process this data and get an human readable output. I'm providing 2 sample comment data i have in my oracle SQL db which i'm trying to process.
Example 1 :
<html>
<body>
<div align="left"><font face="Arial Unicode MS"><span style="font-size:8pt">Display the frulog on the count values</span></font></div>
</body>
</html>
Example 2: <not implemented in this release>
i used the below query to process the html characters
Select (REGEXP_REPLACE(comments),'<.+?>') from test_table;
Note: consider values provided in Example 1 and Example 2 are passed in as column comments in the above SQL command.
the query result for Example 1 was Display the frulog on the count values which is what i'm expecting. result for Example 2 was ''. Value in Example 2 was not an html tag but it still replaced the tags. How can i make the replace statement smart.
Feel free to drop your suggestions .
SQL Fiddle
Oracle 11g R2 Schema Setup:
CREATE TABLE comments ( value ) AS
SELECT '<html>
<body>
<div align="left">
<font face="Arial Unicode MS">
<span style="font-size:8pt">
Display the frulog on the count values
</span>
</font>
</div>
</body>
</html>' FROM DUAL UNION ALL
SELECT '<not implemented in this release>' FROM DUAL UNION ALL
SELECT '<test a="1"
b=''2''
c = 3
d
e = ">" >test</test>' FROM DUAL;
Query 1:
SELECT value,
REGEXP_REPLACE(
value,
'\s*</?\w+((\s+\w+(\s*=\s*(".*?"|''.*?''|[^''">\s]+))?)+\s*|\s*)/?>\s*',
NULL,
1,
0,
'im'
) AS replaced
FROM comments
Results:
| VALUE | REPLACED |
|------------------------------------------|----------------------------------------|
| <html> | Display the frulog on the count values |
| <body> | |
| <div align="left"> | |
| <font face="Arial Unicode MS"> | |
| <span style="font-size:8pt"> | |
| Display the frulog on the count values | |
| </span> | |
| </font> | |
| </div> | |
| </body> | |
| </html> | |
|------------------------------------------|----------------------------------------|
| <not implemented in this release> | (null) |
|------------------------------------------|----------------------------------------|
| <test a="1" | test |
| b='2' | |
| c = 3 | |
| d | |
| e = ">" >test</test> | |
Note: <not implemented in this release> is a valid HTML custom element with tag name not and attributes implemented, in, this and release.
If you only want to replace specific HTML elements then list them at the start of the regular expression:
\s*</?(a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|command|content|data|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|element|em|embed|fieldset|figcaption|figure|font|footer|form|frame|frameset|h1|head|header|hgroup|hr|html|i|iframe|image|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark|marquee|menu|menuitem|meta|meter|multicol|nav|nextid|nobr|noembed|noframes|noscript|object|ol|optgroup|option|output|p|param|picture|plaintext|pre|progress|q|rp|rt|rtc|ruby|s|samp|script|section|select|shadow|slot|small|source|spacer|span|strike|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp)((\s+\w+(\s*=\s*(".*?"|''.*?''|[^''">\s]+))?)+\s*|\s*)/?>\s*
I'm having a bs3 page with 3 columns layout as below:
| 1 | 2 | 3 |
3 X 6 X 3
on large screens this is fine, however, on small screens(mobile phones), i want the order to be: 2>1>3 like below:
| 2 |
| 1 |
| 3 |
what should I use for to achieve this functionality?
Try this:
<div class="col-xs-12 col-sm-6 col-sm-push-3">2</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-6">1</div>
<div class="col-xs-12 col-sm-3">3</div>
Using Twitter Bootstrap 3 how can I create a box (DIV) that has a title, and below the title a row for icons or text, and below that an area for text?
For example:
--------------
| My Title |
|--------------|
| Print | Edit |
|--------------|
| This is the |
| body of my |
| DIV box. |
--------------
Thanks!
This can be done several ways. Here are a few options:
First, is a modal. That doesn't seen to be your goal necessarily though:
Modals: http://getbootstrap.com/javascript/#modals
Next is a list group, which seems closer:
List Groups: http://getbootstrap.com/components/#list-group
The closest one to what it seems like you want is a panel:
Panels: http://getbootstrap.com/components/#panels
Iam trying to develop metro appications in windows8 using visual studio 2012RC .Here i need Menu Items like a column wise,And each Item need to navigate separate page if user click on it.Here i tried to give u my application scenario.Any working examples are really helpful to me.
Thank you.
MetroApplication:
----------------------------------
| | |
| Item1 |-->Page1 |
|========= |
| |-->Page2 |
| Item2 | |
|========= |
| | |
| Item3 |-->Page3 |
|========= |
| Item4 |-->Page4 |
| | |
----------------------------------
You can use a vertical StackPanel that contains bunch of Buttons: each button will then navigate to the dedicated page.
I am trying to create a search field that is a dynamically populated drop down menu. The code to query the database and populate the menu is as follows:
<form action="<?=$SERVER['PHP_SELF'];?>" method="post" name="nameSearch">
<label for="nameMenu">
<p>Choose a name from the drop down menu<br />
to retrieve all the data for that person.</p>
</label>
<select name="dateMenu" id="dateMenu">
<option value="0" selected="selected">Choose a name</option>
<?php
$sql_search = 'SELECT id, name from $tbl_name';
$query_search = mysql_query($sql_search);
while($row = mysql_fetch_array($query_search))
{
echo '<option value=' . $row['id'] . '>' . $row['name'] . '</option>';
}
?>
</select>
<input type="submit" name="searchName" value="Find">
</form>
The problem is that because the database holds information that causes it to store the same name repeatedly I get the same name listed as an option in my drop down menu.
The DB looks like so:
----------------------------------------------------------
| id | name | uniqueImage | date | time |
----------------------------------------------------------
| 1 | John | uniqueImage001.png | 2011-03-11 | 14:21:20 |
| 2 | James| uniqueImage002.png | 2011-03-11 | 14:24:30 |
| 3 | Joe | uniqueImage003.png | 2011-03-11 | 14:26:10 |
| 4 | John | uniqueImage004.png | 2011-03-11 | 14:40:10 |
| 5 | Joe | uniqueImage005.png | 2011-03-11 | 14:56:32 |
| 6 | Joe | uniqueImage006.png | 2011-03-11 | 15:02:50 |
| 7 | James| uniqueImage007.png | 2011-03-11 | 15:21:25 |
| 8 | John | uniqueImage008.png | 2011-03-11 | 15:26:30 |
----------------------------------------------------------
and the menu options returned look like so:
<option value="1">John</option>
<option value="2">James</option>
<option value="3">Joe</option>
<option value="4">John</option>
<option value="5">Joe</option>
<option value="6">Joe</option>
<option value="7">James</option>
<option value="8">John</option>
What I need is for the drop down menu to be more like this:
<option value="1">John</option>
<option value="2">James</option>
<option value="3">Joe</option>
This way I can get all of the unique images associated with a particular user. I don't need every name in the DB returned in my query, simply each name only one time. I am thinking I may need to set up a relational DB scheme, but I am trying to avoid this. Is there any other way to set this up? Thanks.
Change your SQL to SELECT DISTINCT id, name from $tbl_name
Change your database call to be:
SELECT id, name from $tbl_name group by id, name