I have two gallery buttons, a next and previous, each of which is wrapped in a DIV tag, and want to apply a background image to each. However in some galleries at times the next button may not be output if we've reached the end of the available gallery images. Currently my background image would still appear, even though there is no "next" button. I believe it's possible to add a PHP if statement in my CMS template which might say if content appears in this DIV then output the background image, otherwise don't output anything.
Can anyone please assist ? My PHP skills aren't so great :-(
Many thanks in advance.
<?php
if ($content == "") {$background = "style='background-image:none;'";} else {$background = "";}
?>
<div <?php echo $background; ?> >Your Button</div>
or better will be to hide the div at all
<?php
if ($content == "") {$display = "style='display:none;'";} else {$display = "";}
?>
<div <?php echo $display; ?> >Your Button</div>
You could aslo use javascript for this. For example in jQuery you would write something like this
//launch code when dom is ready
$(document).ready(){
//if a div doesn't have content, then we should remove another div
if(!$('#someDivWithContent').html().length > 0){
$('#someOtherDiv').hide()
}
}
you will ofc have to implement jQuery in your site, if you don't already use it for this code example to work.
then you place this code within a < script type="text/javascript"> tag and change the selectors a bit to target your html elements.
Related
I am working on a website that i just uploaded to a test area.
http://cascarinosonline.com.216-70-85-163.messtudios.com/
I want to edit the gallery based on an incoming link. Currently I am using supersized jquery pluggin for the gallery.
When you view the gallery now its working as it should, however when you are on the Homepage and you click on "new outside area" on the bottom right corner I want it the link to take you to the gallery page but start on a different slide.
I couldn't find an easy way to do this with supersized jquery plugin... I thought it would be a simple URL anchor tag like so:
http://cascarinosonline.com.216-70-85-163.messtudios.com/gallery.php#slide12
So I think this is my solution, the default gallery page is labeled with a php value:
<?php $page = "gallery" ; ?>
And in my code it says
<?php if ($page == "gallery" ) { echo $galleryAll; } ?>
$galleryAll; has the list of gallery images in the normal order.....
Now, I made a different php code that is:
<?php if ($page == "galleryfix" ) { echo $galleryOutside; } ?>
Now this $galleryOutside; has the outside image first in the list.
Both examples above work, if I manually change the php page value to equal the content I want.
My Questions is:
I added an anchor tag to the homepage link and it looks like this:
http://cascarinosonline.com.216-70-85-163.messtudios.com/gallery.php#outside
I want php to find the url and if it has "#outside" then echo $page == "galleryOutside" else $page == "gallery"
I am not sure if this is the best way to do this, but Im pretty positive it will work as long as you can use php to get the incoming link url and change if/else value.
Thanks in advance!
-O
UPDATE: I found this, but not working.
<?php
$host = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if($host == 'cascarinosonline.com.216-70-85-163.messtudios.com/gallery.php#outside')
{
$page = "gallery";
}
else
{
$page = "galleryfix";
}
;?>
I ditched the php method, and used jquery to find the hash tag and to take the proper action inside the gallery.
if (window.location.hash == "#outside") {
$(".slide-11").addClass("activeslide");
}
I have this problem:
I want make one navigation menu with tabs, where when I click the element stays selected. But at the same time, I want to have one page called index.php per example, with the HEADER (Menu, logo, etc.), FOOTER and in the body a ID DIV that load the content from other pages (images.php, articles.php, about.php, etc.)
Well I had tried make it with jQuery and it works but the content show many errors because, these contents depends on a database (MySQL) and all the functions with its variables is in the index.php.
The menu:
<li><?php echo $ent;?></li>
<li><?php echo $lis;?></li>
The jQuery:
$(document).ready(function(){
var elemento = $('#menu ul > li');
var atributo = $(this).attr('class');
$(elemento).click(function(){
//$('#cuerpo').load('1.php');
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//alert("Ha salido bien");
});
});
The PHP code:
<div id="cuerpo">
<?php
switch($_GET['pag']){
case 1:
echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
include '1.php';
break;
case 2:
echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
include '2.php';
break;
default:
include '1.php';
break;
}
?>
</div>
Anyway the CSS class "selected" its losing when i make click.
Any idea? Thanks a lot!
From what I think you are asking you want to have a single page that has a content div that loads different content based on how which menu item you select. One, prepackaged way to do this is to use jquery ui tabs which you can find here.
A way to do it yourself will result in a similar page but will be with your own code.
I will outline for it here and if you would like further details you can let me know.
First, you will make some kind of menu item that involves some kind of element. An example of this would be to use a list.
<ul>
<li id="one">Link 1</li>
<li id="two">Link 2</li>
<li id="three">Link 3</li>
</ul>
Next you will use jquery to bind click events to the list items. Here is an example.
$('#li_id').click(function (e) {
$('#contentDiv').empty(); //empty div in case content from other tabs exists
//load your ajax content here
$.ajax();
//remove selected class from other li that might have it.
$('li.selected').removeClass('selected')
$(this).attr("class", "selected"); //set li class to show selected styling
}
After this all you have to do is add a css entry for your selected class so that it is styled how you want.
If you have any further questions or need more elaboration please let me know.
Clicking an element and having it stay 'selected' can be done with CSS styling, using a 'selected' class.
First remove the 'selected' class from all elements, to remove styling from any element that was previously selected:
$('nav').children('.selected').attr('className','');
and then 'select' the item that was just clicked
$(this).attr('className','selected');
Okay this has all sorts of different facets to consider/approach.
If you want to continue doing this through jQuery you need to use AJAX posts to call php pages that load your data from the database then send it back to your jQuery code through a JSON request (it does this for you) then you just make the results display where you want. You can find out how to do this easily by searching for AJAX Post on this site or even in google. There are lots of very easy tutorials for this method.
If you are loading your navigation from a database then making it selected won't be very hard. If you are not then you will need to use javascript/jQuery to add the css in afterwards.
Using just PHP and html:
What I normally do to achieve a similar result to what I think you're asking about is to append variables to the URL and then use $_GET[variable_name] to use these variable to search for the data that I need to load from the database, like an article's ID or a date range.
For a very crude example:
<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
when a user clicks on that link it reloads the page then in your php file you use:
$articleID = $_GET[articleID];
$navLlink = $_GET[navlinkclicked];
$query = "_write your query code to pull up the article with that $articleID_";
Then just echo out your results in your main content area of the page, instead of loading the original content that was there first.
Assuming you are pulling your navigation links from your database, when you are getting the nav links, check if the nav link has the same name as $navLlink taken from the top then add a class to that link while it's being echoed out during the while loop, using an if statement:
if($thisnavitem == $navLlink){
echo "<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode' class='selectedNave'>"
} else {
<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
}
I hope this helps. This can be elaborated on so much more but this should be a good start
Currently I have a DIV with the name "containerX". The X however can change in any number, depening on the input of the user that submits a value. Based on the number I want to show a certain DIV with values.
Is it possible to create a "if / else" statement in PHP that shows a certain div based on the name.
E.g.
if div name = containter7 then show the following
else if div name = container 8 then show the folloing
and on.
Have tried a lot so far, but can't seem to work it out.
Thnx
Sure thing, assuming you're able to get a variable in PHP that represents the correct div name- There are a few different options, but this would probably be the best (works without too many changes).
Let's say you have the following divs-
<div id='div1'>Some div stuff(1)</div>
<div id='div2'>Some div stuff(2)</div>
<div id='div3'>Some div stuff(3)</div>
In the page's head tag, add a new style for hidden divs:
<style>
div.hidden {
display:none;
}
</style>
Then, change your divs to resemble the following:
<div id='div1' <?php if(divName!="containter1") echo "class='hidden'" ?> >Some div stuff(1)</div>
<div id='div2' <?php if(divName!="containter2") echo "class='hidden'" ?> >Some div stuff(2)</div>
<div id='div3' <?php if(divName!="containter3") echo "class='hidden'" ?> >Some div stuff(3)</div>
That bit of PHP will set each div to the hidden class we made earlier, if the variable divName isn't equal to the right string.
This is by far not the most efficient code, but if you aren't too experienced in PHP (which forgive me for saying, but judging by the phrase if div name = containter7, I would have to assume you're new-ish to the language), then this will get the job done with minimal PHP involvement.
Not sure how to do this... I'm a bit of a php noob. I'm trying to echo the div class '.header1'
In my css I've given .header1 a background image and I want that to appear, but I'm not having any luck so my code must be wrong. Here it is:
echo '<div class="header1">';
.header1 {
background: url(_images/header1.png);
What am I doing wrong? I've tried it with and without the closing div but neither have worked.
The div tag needs both an ending tag and content.
If there is no content, you need to define it's height and width manually.
A. You echo is working .. you are probably not seeing anything because its an HTML tag try
<?php
echo '<div class="header1">Hello</div>';
?>
B. You should try and make sure you set PHP open tag <?php and close tag ?> as demostrated above
Whenever I echo html in php I like to use the heredoc syntax
$div = <<<DIV
<div class="header1"></div>
DIV;
Just looks so much better, to me, especially when your strings get more complex, i.e. quotes and stuff.
I'm building a dynamic navigation bar which is controlled by PHP, and I'm using images within my list. And I'm applying jQuery for the 'hover' effects. This is the PHP code:
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
And in my navigation list I'm setting 'display:none' and 'display:inline' depending on the return value of $page using a PHP 'if' statement. See code:
<ul id="cssdropdown">
<li class="headlink">
<a class="lightNav" href="index.php" <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
<a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
</li>....
This is all working fine, the display of the Nav bar images change depending on what page the user is at. But my problem is now I'm trying to integrate jQuery to get a nice 'mouseover / hover' effect. See jQuery code:
$("li.headlink").hover(function(){
$(this).find("a.lightNav").css("display", "none");
$(this).find("a.darkNav").css("display", "inline");
},function(){
$(this).find("a.lightNav").css("display", "inline");
$(this).find("a.darkNav").css("display", "none");
});
But this is causing problems. When the user moves the cursor over the image in the Nav bar for the current page (ie the 'dark' image), it removes the display attribute set by PHP (obviously).
So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none' and tailor my jQuery from there, but for the life of me I cannot figure out how to do, I'm not the worlds greatest javascript/jQuery coder. Is there a way to check if an element has a particular CSS property applied to it, I googled and fiddled with my code for hours, but to no avail.
Thanks in advance everyone.
P.S. I added the CSS !important in my nav bar within the PHP if statement, but this for some strange reason, is only working in Chrome, all other browsers are ignoring this rule.
with jQuery you can check an attribute value like this:
... your code...
alert($(this).find("a.lightNav").css("display"))
As far as using jQuery to hide/show elements, simply use:
$(this).find("a.lightNav").hide()
$(this).find("a.darkNav").show()
No need to fiddle with "display", it's already built-into hide()/show(). You should not need use this either:
style='display:inline !important'"
By default the display is already block or inline, so unless you're using "display:none" you can usually lave these out.
If you have a left-floating menu you should be using float:left, not display:inline
Also inline styles override stylesheet CSS, so you should never need to use !important.
One hint at styling menus, style the A-tag, not the LI. Put the events on the A tags, not the LIs.
If you want to learn how to style menus properly, see my tutorial:
I love lists.
"So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none'.."
This is untested but you could try something like...
if ($(this).attr('style') == "display:none") {
// do something
}
else if ($(this).attr('style') == "display:inline") {
// do something
}
However, you may want to try addClass() and removeClass() instead of changing and/or using inline CSS.
yep..i'd second that using addClass()l and removeClass() would be loads better...some code like
if($(this).hasClass('visible') {
// do something
}
else {
// do something else
}
seems far better and professional and readable...but just me saying...