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.
Related
I'm trying to hide a DIV, but only when it is displayed in another div.
I have a Contact Form that I display in two places, in a sidebar and on a contact page. This is my form that is displayed using PHP include.
<div class="contact_details_div">
<h3>Some Text</h3>
Some additional text
</div>
<div class="contact_div">
<form id="contact_form" action="" method="post" target="_self">
MY FORM IS HERE
</form>
</div>
In my sidebar, the form is displayed like this:
echo "<div class=\"contact_form_sidebar\">";
include("inc/contact_form.inc.php");
echo "</div>";
And, my Contact page it's displayed like this:
echo "<div class=\"contact_form_full\">";
include("inc/contact_form.inc.php");
echo "</div>";
I've tried to hide the class 'contact_details_div when it is displayed in the sidebar, but I can't seem to get it done. This is my CSS:
/*CONTACT FORMS*/
/*FULL FORM*/
.contact_form_full {
position: relative;
}
/*SIDEBAR FORM*/
.contact_form_sidebar {
position: relative;
]
.contact_form_sidebar .contact_details_div {
display: none !important;
}
Does anyone see an issue? I can't, but I've been staring at it too long and am probably missing something simple.
Thanks!
Rick
You have square brackets instead of curly on line 9 in css.
Let's elaborate my problem. Think we have 3 template files
1.Master
2.Child(home)
3.navbar layout(included in home)
Mater->home->navbar
i have 2 external css files which have this css
p
{
color:red;
}
and
p
{
color:blue;
}
1st css file is linked in master.blade.php and 2nd css file is linked into navbar.blade.php
I want text color of navbar as blue and text color of home(other than navbar) as red.
Now the output is blue(overriding css which is declared in master).
I don't want to modify css(specificity), Is there anything in laravel like scopes for css.
Are you familiar with blade into laravel?
I think you should define a yield section in your master
#yield('css')
and then call it in your navbar or etc ... like this
#section('css')
p
{
color:red;
}
#endsection
and in other files
#section('css')
p
{
color:blue;
}
#endsection
Why don't you check the current route, then echo the color in style attribute in-line in your blade file:
#if(request()->is('/'))
<!-- Homepage -->
<p style="color:red">Hello</p>
#else
<!-- All Other Pages -->
<p style="color:blue">Hello</p>
#endif
or
<p style="color:{{ request()->is('/') ? 'red' : 'blue' }}">Hello</p>
Why don't you just assign an ID to the different paragraph blocks and target them that way? Or even better, create a utility class for each colour.
.text-red {
color: red;
}
And then...
<p class="text-red">Lorem ipsum[...]</p>
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.
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>
I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/