So I am trying to create a dropdown menu with jquery and have a div (the dropdown) with display: none. I am trying to fire the jquery toggle when an li item in the above nav bar is clicked. If anyone could take a look at this code and see if there are any obvious errors, that would be great.
Thanks
PS The php code is present as I am working with WP
<ul class="right-nav">
<li style="padding-left: 10px; cursor: pointer;" id="current-user">
<?php $current_user = wp_get_current_user(); echo $current_user->user_login; ?>
</li>
</ul>
The dropdown menu:
<div class="dropdown-wrapper">
<div id="user-menu" class="user-menu">
<ul>
<li>Hello</li>
</ul>
</div>
.user-menu {
display: none;
}
And then the jQuery event itself:
$(document).ready(function() {
$('#current-user').click(function() {
$('#user-menu').slideToggle("fast");
});
});
Man... I guess I kinda got it. Remove the CSS:
.user-menu {
display: none;
}
And instead, in teh document's ready, give this:
$(".user-menu").hide();
Trust me, this makes a difference. The reason is, the jQuery first checks if the style="display: none;" is there or not in the element, as it is not there, because it is given by the CSS, it gives another display: none inline style. This doesn't make any difference. But third time click will reveal it. Give it a try.
Related
I have a complex view on Laravel with a lot of tabs and forms, the user can navigate on the tabs and do various form submits on every tab, after the submit the controllers returns the same view with a current tab variable, looks like this:
...Controller actions...
return view("store.tesla.user.components")
->with('tab', '3');
Every tab got an ID so when I go back to my view I just search for the active tab and put active with jQuery like this:
var tb_active = <?php echo $tab; ?>
$('#'+tb_active).addClass('active');
Actually it works, but I feel dirty mixing PHP+JS specially using Laravel framework and looks not so well done, so there are my question/s:
There is another way to do it better or more simple?
My view is extremly big and I have a lot of css classes, if I copy my code there it will be messy, so I fork a codepen with bootstrap tabs for better showing :)
https://codepen.io/Troyer/pen/MbGQPJ
HTML
<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
<li>Applying clearfix
</li>
<li>Background color
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
body {
padding : 10px ;
}
#exTab1 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
#exTab2 h3 {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
Thank you for your time.
Have you tried hidden fields. You can set that tab active by read that hidden value like:
$( ".selector" ).tabs({ active: $('#your-hidden-fiel').val() });
See the full example.
create an array in js below your content section
var pagedefaults = {
activetab: "{{ $activetab }}",
};
Here $activetab is coming from your controller. Now you can use active tab value like pagedefaults.activetab in your javascript and make tab active.
This can also be used in localisation and Ajax Routes.
facing a bit of a difficult area in my first page itself (index.php), these are the things that I hope to have. I assume these can be solved with HTML.
I hope to have the menu listing on the left, and when selected, should be able to call other php programs, which will be displayed on the right.
The selected item from the list on the left should be made bold.
The default page should be “home” (the first on selection list).
I have given below the code that I came up with but it doesnt work the way I like it to work.
Part of index.php
<table id="structure">
<tr>
<td id="navigation">
<ul class = subjects>
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</li>
</ul>
</td>
<td id="page">
<h2> Home </h2>
<div class = "page-content" >
<p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p>
</div>
</td>
</tr>
</table>
Part of the CSS is as below
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }
jQuery has a very convenient method $(element).load() for you to load HTML and insert into the element that you specified.
Example usage:
<table id="structure">
<tr>
<td id="navigation">
<ul class ="subjects">
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</li>
</ul>
</td>
<td id="page">
<h2> Home </h2>
<div class = "page-content" >
<p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p>
</div>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- optional if you have jQuery already -->
<script>
$(document).ready(function() {
// Once the page is ready for using jQuery, we now bind a "click" action to all "a" element via CSS selector which will be processed by jQuery.
$(".subjects a").click(function() {
// Whenever any link of above is clicked, it goes to here
// This is a convenient method provided by jQuery to do:
// 1. Try to make a HTTP request (AJAX) to the link (this.href = the content of the "href" attribute of the element clicked)
// 2. Once it gets the response, put the content to div with class ".page-content"
$(".page-content").load(this.href);
// Return false here so that the browser will not go directly the link, but stay on the same page instead
return false;
});
});
</script>
Note: Please avoid using table to layout your page. Try to use CSS + div - a better way to layout :D
I am having a small login form and want to display it in case JavaScript is disabled. Form has similar structure :
<a ...href="#"...>Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<form action="/login/" method="post" ....>
.... form components ....
</form></div>
div with class "dropdown-menu" has display:none initial. And when click "a" tag or hover it should change to display:block. Found simillar issue here Show hide divs on click in HTML and CSS without jQuery but there are solution only for label and using tabindex and :focus.
Done Thanks to #Florian i've fixxed my problem. Here is code if someone is interested.
in .html file
<a class="dropdown-toggle" style="display:none" href="#" data-toggle="dropdown" id="navLogin">Login</a>
<input type='checkbox' style='display: none' id=cb>
<label class="dropdown-toggle" id="labelLogin" for=cb>Login</label>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<form ...... >
... Form Components...
</form>
</div>
in .css file
input:checked + label + div { display: block; }
label {position: relative;
padding: 10px 15px;
color:#428bca;
}
And in .js File
$('#navLogin').removeAttr('style');
$('#labelLogin').css('display', 'none');
Following code will show "a" tag when JavaScript is enabled and will show only label when it's disabled.
You need something that you can toggle. Beside javascript the only way to change some state in a html page is the checkbox element. With some tricks this can be used to show/hide other elements.
Have a look at this example http://jsfiddle.net/gSPqX/1/ (Not created by myself). It is a bit simpler than the solution you linked and also uses a div.
Basically the trick is to use the + Operator in the css code which selects next sibling element.
input:checked + label + div { display: none; }
(Taken from the fiddle)
So you have three elements, the checkbox-input, the label and the div. The checkbox is used to save the current state, the label is used to have a larger clickable area and the div contains the actual data.
Use noscript like this:
<noscript>
<style>
#noscript{display:none !important;}
#container{display:none;}
</style>
</noscript>
My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.
Before click:
<ul>
<li id="panel1"><a></a><div class="content"></div></li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
After click:
<ul>
<li id="panel1">
<a></a>
<div class="content">
<form id="FORM"> ..... </form>
</div>
</li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
You can do that using :target css pseudo selector - it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use javascript.
<style>
form {
display: none;
}
form:target {
display: block;
background: red;
}
</style>
<ul>
<li id="panel1" ><div class="content">Show form<form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>
some examples of :target in action:
http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/
Without using ANY javascript at all, you can't.
Unless you just put links and redirect your users to a page with the expanded content every time.
Or unless you write some kind of complex CSS using the :hover pseudo-selector and not the click event.
CSS 3 has a :target pseudo-selector that might help. Here is an example: https://tinker.io/1756b
I am using a pre-existing jQuery popup plugin for a WordPress site. The popup works great but the only problem is the styling - it didn't include any sort of "overlay" in the design. Since I want the background to "grey out", I set out to adding some classes and styles to the css to make this happen, but am running into a wall.
Here was the original HTML:
<div id="messagebox" class="visiblebox">
<div id="message">message content</div>
</div>
And I added a div above that to create this HTML:
<div id="popupOverlay" class="visiblebox"></div>
<div id="messagebox" class="visiblebox">
<div id="message">message content</div>
</div>
Here is the JS - I added the 2nd line to the removeMessageBox function below after editing my HTML per above:
function removeMessageBox() {
jQuery(this).parent('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
jQuery(this).parent('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
return false;
}
function boardReady() {
jQuery('#closebox').click(removeMessageBox);
jQuery('#messagebox').css('visibility', 'visible');
}
jQuery(window).load(boardReady);
And here is some corresponding CSS:
div#popupOverlay.visiblebox {display: block;}
div#popupOverlay.hiddenbox {display: none;}
div#messagebox.visiblebox {display: block;}
div#messagebox.hiddenbox {display: none;}
Of course, it's not working. I barely know any JS so I'm not sure exactly what to add to the right function to get the same effect of the close action when clicked on the close link.
I see. Why don't you try this
function removeMessageBox() {
jQuery('#messagebox').removeClass('visiblebox').addClass('hiddenbox');
jQuery('#popupOverlay').removeClass('visiblebox').addClass('hiddenbox');
return false;
}
There is no need for all the jQuery traversing (i.e. using the .parents() method) as both elements have unique IDs. The problem with your code is that #popupOverlay is not a parent of closebox.