Hello My question is not how to echo a php variable into a DIV. My question is how to contain it. When I enter text into the DIV it expands and contains text, but the echoed php Variable content from the variable crosses the boundery Vertically at the bottom only. Overflow:hidden works but then it does not expand with the content.
** CSS **
.bottom-menu-body{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
** DIV **
<div class="card">
<div class="bottom-menu-body">
<?php echo $bidcard; ?> <!-- Bid Card Content from Require: db_ac_bids.php-->
<?php echo $nobids_message; ?> <!-- Bid Card Content from Require: db_ac_bids.php
CSS control via acceptbid css card-->
</div><!-- Bottom Menu body End -->
</div><!-- Card end -->
I am not able to understand the question properly but I guess below css might help you :
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
"text-overflow: ellipsis" this will add "..." ellipsis.
I am using osclass for a classifieds website. The theme has some widgets of which one is a search form. It is called into a header which exists on all pages. However, I would like to hide the search form only on this one page.
The form looks like this:
<form class="nocsrf navbar-left form-vertical" action="<?php echo osc_base_url(true); ?>" >
<div class="dropdown navbar-form js-menu-search-container">
…
…
</form>
How can I condition the form to show on all pages except on this one only: item-post.php?
I would greatly appreciate some help here.
You could have a style tag just on that page that hides the search form.
Add the following to the page you want to hide the form on:
<style>
.dropdown.navbar-form.js-menu-search-container {
display: none !important;
}
<style>
<style>
.form-hide{
display:none !important;
}
</style>
<?php
function need_hide_condition(){
$pos = strpos( $_SERVER["REQUEST_URI"], "YourUrl"); //likes /test.php
if( $pos!=false ) return true;
else return false;
}
?>
<form class="nocsrf navbar-left form-vertical <?php if( need_hide_condition() ) echo 'form-hide';?>">
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/
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.