I'm using these tabs on a page to keep all the information needed on one page.
My question is, when I link from another page, would it be possible to open a specific tab on load? What should I look for? Hope You can help me out here.
Thank you.
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab_how" checked />
<label for="tab_how">Something here</label>
<div id="tab-content" class="tab-content">
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab_support" />
<label for="tab_support">Something else here</label>
<div id="tab-content" class="tab-content">
</div>
</li>
</ul>
Add a name or id to you ul as anchor:
<ul id="target_tab" class="tabs">
for the link:
Link
Hope this is what you are looking for.
Related
I have a simple question. I do not know how to add custom url in my latest version of wordpress today.
In the following snap.
The top menu is the one that i want to customize. Inspecting it and adding
a style of display none, i got the result. But I do not know how to add this Customize->custom-url. Do any one know how to ..
The following is the source code as follows:
<div class="full-container">
<a href="http://www.keynesdeepak.com/blog/" title="Deepak’s Website" rel="home" class="logo" style="
/* display: none; */
"><img src="http://www.keynesdeepak.com/blog/wp-content/uploads/2017/10/deepak_logo.png" class="logo-height-constrain" width="369" height="214" alt="Deepak's Website Logo"><h1 class="site-title logo-title" style="">Deepak's Website</h1></a>
<div id="search-icon">
<div id="search-icon-icon"><div class="vantage-icon-search"></div></div>
<form method="get" class="searchform" action="http://www.keynesdeepak.com/blog/" role="search" style="width: 1080px;">
<input type="text" class="field" name="s" value="" placeholder="Search">
</form>
</div>
<div id="so-mobilenav-standard-1" data-id="1" class="so-mobilenav-standard"></div><div class="menu" style="
"><ul>
<li class="current_page_item"><span class="icon"></span>Home</li><li class="page_item page-item-45"><span class="icon"></span>Blog</li>
<li class="page_item page-item-41"><span class="icon"></span>Contact Me</li>
<li class="page_item page-item-43"><span class="icon"></span>Gallery</li>
</ul></div>
<div id="so-mobilenav-mobile-1" data-id="1" class="so-mobilenav-mobile"></div><div class="menu-mobilenav-container"><ul id="mobile-nav-item-wrap-1" class="menu"><li><span class="mobile-nav-icon"></span>Menu</li></ul></div> </div>
Go to Appearance -> Menus and add new custom link to your menu and drag it according to the order you want.
see the screenshot below:
Edit your first url, go to theme appearance editor
<a href="http://www.keynesdeepak.com/blog/" title="Deepak’s Website" rel="home" class="logo" style="
My understanding is that Materialize doesn't support styled multiple-select boxes - you have to specify browser-default and not use Materialize styling. (correct me if I'm wrong)
So I've tried to make an equivalent with Materialize dropdown with checkboxes inside the dropdown like this:
<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true">
Relates to topics...</a>
<ul id='topics_dropdown' class='dropdown-content'>
<li>
<input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
<label for="report_topics_409928004">Engagement</label>
</li>
<li>
<input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
<label for="report_topics_669658064">Appraisal</label>
</li>
<!-- etc. -->
</ul>
But there's a glitch in how this gets rendered. The text and boxes gets offset by half a line downward, so the highlighting hover effect highlights a rectangle that overlaps two different options. Is there any way to correct this glitch?
Here's a screenshot. It's not the same content as the example code above but it's the same dropdown-checkbox structure.
My workaround has been to put each checkbox in its own div inside the dropdown rather than using the dropdown list structure
<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> Relates to topics...</a>
<div id='topics_dropdown' class='dropdown-content'>
<div>
<input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
<label for="report_topics_409928004">Engagement</label>
</div>
<div>
<input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
<label for="report_topics_669658064">Appraisal</label>
</div>
<!-- etc. -->
</div>
It doesn't have the hover effect, but it works.
[type="checkbox"]+label {
display: inline;
}
I have create a future in my application that will allow me to create dynamic field on a page. What I need to do here is to display the those field the same way every time.
I want to be able to display up to 2 field next to each other "if any"
I have attached a screenshot on what I need the final display to look like
from the image below the field "No Longer an Employee" is a label and to the right of it there is a value in this case "NULL." And to the far right of it there is another field called "Outside Sales Primary Contact" with a value of "NULL."
So I want to display the field into 2 column if there is enough fields other wise put one on the left and nothing on the right.
not I don't need help with how to generate the field. I need help with CSS and bootstrap on how to display the column next to each other.
I may need some more details to clarify your question but I made you a demo codepen of what I think you're looking for.
DEMO - http://codepen.io/BooststrapBay/pen/DGzIu
<div class="container">
<div class="row">
<div class="col-md-6 example-form">
<ul>
<li>
<span>No longer an employee</span>
<input class="form-control" type="text">
</li>
<li>
<span>Support level</span>
<input class="form-control" type="text">
</li>
<li>
<span>Previous role</span>
<input class="form-control" type="text">
</li>
<li>
<span>Attitude</span>
<input class="form-control" type="text">
</li>
<li>
<span>Attitude detail</span>
<input class="form-control" type="text">
</li>
</ul>
</div>
<div class="col-md-6 example-form">
<ul>
<li>
<span>Outside sales primary contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Training primary contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Primary enrollment contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Birth month</span>
<input class="form-control" type="text">
</li>
<li>
<span>Birth day</span>
<input class="form-control" type="text">
</li>
</ul>
</div>
</div>
</div>
I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.
Using this template: http://foundation.zurb.com/templates/workspace.html
Can someone tell me how I can move the search button to the right as in pic where the blue button is located?
This is what I am using now:
<input type="submit" value="Search" style="float: right;">
Fiddle: Search button code
<ul class="right">
<li class="search">
<li class="has-button">
/* Original template form */
{#<form>#}
{#<input type="search">#}
{#</form>#}
/* My form with code */
<form action="{{ path('sym_corp_search') }}" method="GET">
<label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
<input type="submit" value="Search" style="float: right;">
</form>
</li>
</li>
/* Original form button in blue */
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
Using the foundation classes, you can manage to perform this layout with your own inputs, your code will look like this:
<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
<li class="search">
<label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
</li>
<li class="has-button">
<input type="submit" value="Search" class="small button" />
</li>
</form>
</ul>
You have to use margin property like margin-left:50%; or more and you can also use ... tag but it will make button position to center. float:right is can be used in div, Not in button.
Move your button in a div :<div id="mybtn"><input type="submit" value="Search"></div> add CSS : #mybtn {float : right;display : inline-block;}
Instead of using anchors or buttons in a drop down menu, I want to have a form for each item. The form contains some hidden fields and a submit button. When I put the form in each <li> of my mark up, the UI was messed up. Does Bootstrap support this natively? If not, I'm going to re-code my application to work with links.
Update 1: screen shot
Update 2: mark up
<div class="btn-group open">
<button class="btn">Action</button>
<ul class="dropdown-menu">
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Favorite"/>
</fieldset>
</form>
</li>
<li>Message</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Smile"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Block"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Friend"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Exclude From Future Search Results"/>
</fieldset>
</form>
</li>
</ul>
</div>
Update 3: icons
I want the submit buttons to have an icon. Not sure what's the best way to do that, but this is my solution:
<label for="foo">
<i class="icon-ok></i> Favorite
</label>
<input id="foo" style="display:none;" type="submit" value="Favorite"/>
The submit form is hidden, the label is shown with icon, and when user clicks on the label, it works. No JS required.
Not quite sure if I understand what you mean about the submit form being hidden but the label showing an icon however I was able to override the buttons with an image. Please see the attached jsBin. I did it by adding a class to the input's
http://jsbin.com/eboqij/1/edit
.button{
background-image:url('http://www.nyanicorn.com/res/img/icon_nyan.png');
background-repeat:no-repeat;
text-indent:-9999px;
width:40px!important;
}
Or just use Javascript to store the value in a hidden field and submit the form -- you're probably using JS anyways handle the open/close of the dropdown.
I had the exact same problem and I've created this new "submit" plug-in:
!function ($) {
"use strict"; // jshint ;_;
$(document).on('click.submit.data-api', '[data-submit]', function (e) {
e.preventDefault()
var form= $('#'+$(this).data('submit'))
form.find('input[name="'+$(this).data('name')+'"]').val($(this).data('value'))
form.submit()
})
}(window.jQuery);
Which I can use thus:
<form id="myform" ...>
<input type="hidden" name="myparam">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a data-submit="myform" data-name="myfield" data-value="myvalue>
Click here
</a>
</li>
</ul>
</div>
</form>