I have 2 div's, if one is shown with a class="goodbye" - how do I remove the other div with php?
Or do I have to use jQuery?
<!-- this div should not show if the below class="goodbye" is on the page -->
<div class="hello">
Hello
</div>
<div class="goodbye">
goodbye
</div>
Javascript, not PHP.
if ($('.goodbye').length > 1) {
$('.hello').hide();
}
PHP, being a server-side scripting language, can't manipulate the DOM. If the condition you're using to evaluate the display of your <div>'s is processed server-side, then you could use PHP to echo one <div> or the other. Otherwise, use jQuery or JavaScript to manipulate the DOM client-side.
To answer the direct question. Remove it using PHP:
if($hello) {
echo "<div class=\"hello\">Hello</div>";
} else {
echo "<div class=\"goodbye\">goodbye</div>";
}
You can't do this with PHP since it is a server side language. Once the page is rendered you'll have to use a client side language. Yes, you can use jQuery(Javascript):
//when to handle..
$("input").click(function() {
$(".hello").toggle();
$(".goodbye").toggle();
});
http://jsfiddle.net/kfhb7gzq/
Here is a CSS option using the sibling selector. If .hello is sibling to .goodbye: display: none;
.goodbye + .hello {
display: none;
}
<div class="goodbye">
goodbye
</div>
<div class="hello">
Hello
</div>
jsFiddle with goodbye ( hides hello )
jsFiddle without goodbye ( shows hello )
This solution requires reordering the elements because the sibling selector doesn't select the previous.
You can't do it in PHP once the page is rendered... Use jQuery instead. There are lots of different ways to do this.
Use .is(":visible")); to see if the class is visible or not.
Try this example:
$('#clickme').hover(function () {
$('.hello').hide();
$('.goodbye').show();
alert($('.goodbye').is(":visible"));
}, function () {
$('.goodbye').hide();
$('.hello').show();
alert($('.goodbye').is(":visible"));
});
JSFiddle Demo
Related
Okay so I have this portfolio page where I display a couple of thumbnails, and you can order it by tags, so for example like this:
year 1
And this works fine. However, my thumbnails display at three on a row, so only the first two should have a right margin, the third one no margin.
I used PHP to do this which works fine.
if ($result=$link->query($query)) {
for ($i=1; $i <= $result->num_rows; $i++) {
$row= $result->fetch_assoc();
$id = $row['number'];
$title = $row['title'];
$bgthumbnail = $row['thumbnail'];
if($i%3 == 0){
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview noMargin\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
} else {
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
}
}
$result->close();
}
However, when I click a tag, the margin doesn't update. So when a thumbnail was given no margin in the overview because it was the third one in row, when it displays first because of a chosen tag, it also receives no margin.
Of course this is because nothing "refreshes" or something, but I was wondering if there is an "easy" way to fix this problem? To make the PHP loop run again or something?
You must to set/remove noMargin class name via javascript:
$('.year-clicker').click(function (event) {
event.preventDefault();
var year = $(event.currentTarget).data('year');
$('.thumb').hide().removeClass('noMargin').filter('.year' + year).show();
$('.thumb:visible').each(function (i, e) {
if ((i + 1) % 3 == 0) {
$(e).addClass('noMargin');
}
});
return false;
});
Try out this jsfiddle http://jsfiddle.net/xgE3K/1/
unless your "tags" are recalling the page - so that the php is re-executed - you probably want to look at javascript (or possibly ajax) to do the reformatting of the layout.
Depending on the quantity of thumbnails and the variety of tags, you might use the php to create a div (with a relevant id and a style="" attribute) for each of the different filter tags - containing the layout of the thumbnails for that tag (so you can ensure your layout is fine for each view).
i.e. repeat your code above enclosed by a unique div tag for each view.
Make the default view div visible (style="display: block") and the others hidden (style="dsplay: none").
Then have a javascript function that is executed on any tag click. This will make the relevant div visible and the rest hidden, by changing their style value as above.
Uses a bit more memory, but your switching between views will be quicker than doing a reload.
Despite all this, I think it's cleaner and more scalable to recall the page with the relative filter (depending on the tag) then you will have more control over the layout.
I am creating a <div> that represents a table row in sql, with php. Fine.
Then I am using a javascript function to test the values of the div (position, width etc).Fine.
But I need to pass another value to the div to be checked by the function. It is there in the database but I don't know if there is a (simple) way to do it. Ideally it would look something like this.
<div id='plumber5' class='plumber' style='width:50px;left:100px' value='numericValue'>Derek</div>
The inline styles are generated in php, and can't think of a way of passing a numeric value other than by style (width, height etc) that js can detect.
eg.
<script>
a=document.getElementById('plumber5');
if (a.style.width=>75){
execute something here}
</script>
Instead of using style as a source for testing
Its very troubling!
Thanks
EDIT - solution
function checkData($type){
a = document.getElementsByClassName($type);
for(i = 0; i < a.length; i++)
{
if (a[i].getAttribute('data-dob') >= sessionStorage.Value) {
// execute something here
}
}
}
You can use the data attribute of HTML5 to add some custom data to your HTML tags:
http://ejohn.org/blog/html-5-data-attributes/
Example:
<div data-value='10' id='plumber5' class='plumber' style='width: 50px; left: 100px;'>
Derek
</div>
You can get the value like this:
<script>
a = document.getElementById('plumber5');
if (a.getAttribute('data-value') => 75) {
// execute something here
}
</script>
You can use data- attributes this way:
<div id='plumber5' class='plumber' style='width: 50px; left: 100px'
data-value='numericValue'>Derek</div>
Note: HTML5 Data Attributes are supported only in modern browsers like IE 9+, Chrome 12+, Firefox 5+.
Notice that you have an error in the style attribute. Replace:
style='width=50px;left=100px'
With:
style='width: 50px; left: 100px'
If your audience doesn't support HTML5, you can embed a div like:
<div id="plumber5" class="plumber" style="width:50px;left:100px">
Derek
<div style="display: none">numericValue</div>
</div>
That would hide the value from view, but would allow you to access it view Javascript.
HTML5 supports data-* tag attributes, so you can use:
<div id='plumber5' class='plumber' data-value='numericValue' data-myothervalue='otherOne'>
Derek
</div>
EDIT
Since it looks messy in comments, here's how to access the example values:
var myDiv = document.getElementById('plumber5');
var myVal = myDiv.getAttribute('data-value'); // 'numericValue'
var myVal2 = myDiv.getAttribute('data-myothervalue'); // 'otherOne'
I have a web site. Here in my home page there is a content "My dummy text ". which is placed in ul li a tag. ie
<ul><li><a>My dummy text</a></li></ul>
i want to make this text should highlighted in blue when someone first lands on the home page. other wise it's must be in white. Does any one know how to do this ?
mine is a php web site
Thanks in advance
Just to add a little onto the cookie method I suggest adding a class to the <body> tag so that if in the future you want to do more you could do it without having to modify the PHP.
For example:
<?php
function dejavu() {
$class = '';
if($_COOKIE['beenHereBefore']) {
$class .= 'beenHereBefore';
}
else {
$class .= 'firstTimeHere';
setcookie("beenHereBefore", true);
}
return $class;
}
?>
<body class="<?php echo dejavu(); ?>">
One thing that you want to take into account though is that if a user clears their cookies then it will act as though they are visiting the site for the first time; so I suggest, if possible store it in their user profile if one exists.
So then in your CSS you can do the following:
ul li a {color: white;}
.firstTimeHere ul li a {color: blue;}
I dont see any code so..here is my theoritical explaination as well...
1 Use Cookies.
2 HTML5 Cache..You can use localstorage to do that as well
you can use cookie
set default 0
if someone loaded the page than change cookie to 1 otherwise 0
.
<ul>
<li>
<a <?php if($_COOKIE["status"] == 0){style="color:blue;"} ?>>My dummy text</a>
</li>
</ul>
Use:
$(window).ready(function(){
// do your CSS stuff here ...
});
Or use :
$(document).ready(function(){
// do your CSS stuff here ...
});
Check this link : http://api.jquery.com/ready/
I advise you to do it using jquery to check if you are in the home page
Assume your home page is called : index.php
Like this :
if(window.location.href.indexOf("index.php") > -1)
{
$('#ulid li').css('color', 'red');
}
else $('#ulid li').css('color', 'black');
Give your ul an ID and assume you want to highlight using red and your original text color was black
No need to use Cookies you can do this trick using jquery very easily .
An ex developer of ours when working on one of our first versions of our internal PHP framework integrated the dropdown element of main navigation using javascript and I need to get a fix applied for IE8 which is causing the dropdown to appear offset even though using CSS displays fine in Firefox / Chrome.
The site in question is http://www.benchmemorials.co.uk/
In the event there is sub menu items from the main navigation that use a dropdown, javascript is called to display this I believe (below)...
<script type="text/javascript">
$(document).ready(function() {
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
$('#link_why-buy-from-us').mouseover(function() {
$('.dropdown').show();
});
$('.dropdown').mouseover(function() {
$('.dropdown').show();
});
$('.dropdownstyle').mouseover(function() {
$('.dropdown').show();
});
$('#link_why-buy-from-us').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdown').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdownstyle').mouseleave(function() {
$('.dropdown').hide();
});
});
</script>
I'm not too hot on javascript but from what I gather, I presume the above is instructing the drop down to appear below the 'Why Buy from Us' top navigation menu item. As I mention, this is working as expected in Firefox/Chrome.
However, the issue appears to be the fact that somewhere along the line, inline CSS is being generated dynamically for the dropdown class - this is dynamically generating
style="top: 61px; left: 964px; display: none;"
Every file on the server has been searched and nowhere is this specified, my only guess is that the javascript above is somehow creating this line of CSS which is therefore preventing me from altering the position of the dropdown in the IE only stylesheet to fix the display in IE8.
The rest of the code for the dropdown menu from the php file is below:-
<div class="dropdown"><div class="dropdownstyle">
<?php
mysql_select_db($database_config, $config);
$query_sub_pages = "SELECT * FROM `pages` WHERE site_id = '".$current_site_id."' AND menu_location = 'sub' ORDER BY `order` ASC";
$sub_pages = mysql_query($query_sub_pages, $config) or die(mysql_error());
$row_sub_pages = mysql_fetch_assoc($sub_pages);
$totalRows_sub_pages = mysql_num_rows($sub_pages);
$current_sub_link = 0;
do {
$current_sub_link = $current_sub_link + 1;
?>
<p<?php if ($current_sub_link != $totalRows_sub_pages) {echo ' style="margin-bottom: 10px;"';}; ?>><a class="sub_link" href="<?php echo $site_base.$row_sub_pages['page_location']; ?>"><?php echo $row_sub_pages['page_display_name']; ?></a></p><?php //if ($current_sub_link != $totalRows_sub_pages) {echo '<br />';}; ?>
<?php } while ($row_sub_pages = mysql_fetch_assoc($sub_pages)); ?>
</div>
</div>
As you can see, there is no inline CSS applied to .dropdown. All CSS from the sylesheets can be viewed if you inspect element in browser.
Please could anyone advise how or if it is possible to prevent this dynamic CSS positioning from being generated or an alternative / easier method of ensuring the dropdown appears consistently across all browsers including IE?
Thanks in advance.
The positioning is done by this code:
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
It takes the position of #link_why-buy-from-us relative to the document, and adds it to the .dropdown element.
I don't know if you're familiar with jQuery, but the code above is written using that JavaScript library. For more documentation about .offset(), look here: http://api.jquery.com/offset/
If you guys check out this webpage:
http://www2.scandvision.se/oresund10/
How have they done this background fade in fade out?
When i check the source this
<img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />
and i think theres some kind of script maybe php or js, or both, that every 5 sec changes the background:
images/body-background-1.jpg
images/body-background-2.jpg
images/body-background-3.jpg
and so on..
So how did they do this? an example would be great, as i want to learn how to do that. If i was going to do something like this i think i would only manage to do a script in php that randomize everytime you refresh.
Thank you, this will expand my knowledge
I did that one time on a website, I use "Prototype JS" and "Script Aculo US" but you can easily do the same thing without these library. You can see an example here: www.envolulm.fr
I extract below and translate some comment of my code:
/* In my HTML PAGE*/
<div id="slideshow">
<p id="text1"><img src="/url/of/your/image1"/></p>
<p id="text2"><img src="/url/of/your/image1"/></p>
<p id="text3"><img src="/url/of/your/image1"/></p>
<p id="text4"><img src="/url/of/your/image1"/></p>
</div>
CSS:
#text1, #text2, #text3, #text4 {
position:absolute;
height:402px; // you can put other value...here
width:850px; // you can put other value...here
}
Javascript function
function changeimg(){
var sec = 6000; // Change each 6 secondes
var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID
// For each element "<p>"
paras.each(function(para){
if(para.visible()){
paraFade = para; // We stock the item which will disappear
paraAppear = para.next(); // We got the next element (The one who wants to appear)
//If it's the last "p" element we come back to the first one
if(paraAppear == undefined){
paraAppear = paras[0];
}
}
});
Effect.Appear(paraAppear); // Script Aculo US animation
Effect.Fade(paraFade); // Script Aculo US animation
timer = setTimeout("changeimg()",sec); // Timer
}
Event.observe(window, 'load', function() { changeimg(); }
Hope that can help you.
They are using mootools framework. Check this out:
http://mootools.net/forge/p/slideshow
The jquery cycle plugin is a simple script to do this effect.
I think you can have the same effect if you use a jquery plugin called "jquery innerfade"
Here is a website when you can get the .js file of it, of course you need jquery to use it
Inner Fade