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.
Related
Still new to all of this, not sure if I'm using span class correctly however, I have to "link" this paragraph to a field groupp in wordpress and im not sure how to modify the code correctly.
This is an example of what was meant to be achieved:
<h2><?php the_field('barbarismtitle'); ?></h2>
I can edit this fine in wordpress but Im not sure how I would do the same for this:
<p>After <span class="thebatavia">The Batavia</span> was wrecked, the survivors were left to the dictatorship of <span class="jeronimuscornelisz">Jeronimus Cornelisz</span>, where 125 men, women and children were murdered.</p>
The span is so that only a few words in the paragraph have a certain colour. Any help would be appreciated. (also there aren't spaces in my code, It just wouldn't show otherwise)
Using the span to add a custom class to change the colour of the text is a good idea, if your trying to create a link to another page you will need to use an A tag.
so the php needed to link would look something like this
<p>After The Batavia was wrecked, the
survivors were left to the dictatorship of.....
This is assuming that the_field('barbarismtitle') would return a url to fill the href property
Alright, so basically I aligned 9 boxes in three rows vertically and horizontally, and used css to position them. Everything went fine and worked, until I included a php command to access a mysql database and echo certain rows inside the divs. The first box maintained it's position, however the second was too far to the right and higher than I originally set it to be, the 3rd one was all the way off the screen, you had to scroll to see it. I've attempted to fix this through positioning in html (and deleting the css commands), however this only works for chrome. In firefox the boxes seem to ignore the command and start at the left top corner.
the codes with the php inside look like this:
<div id= "box1"> <div style="position: absolute;background-color:#fff;width:250px;height:120px;border:0px;">
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("testtest") or die(mysql_error());
$query = mysql_query("SELECT * FROM posts ORDER BY time ASC LIMIT 0, 1;");
while ($row = mysql_fetch_array($query)) {
echo '<div style="font-weight: bold;">';
echo $row["Title"];
echo '</div>';
echo '<div style="font-weight: normal;">';
echo $row["Offer"];
echo '</div>';
}
?>
</div>
and the css codes look like this (obviously different for each box, but you get the point)
# box1 {
margin-top: -140px;
margin-left: 830px;
}
Thanks in advance for any help, I'm really stuck there and I can't seem to figure out why php would affect the positioning of a div..
You may want to re-write your page markup. Using a negative margin is probably not the best idea, especially if the boxes are position:absolute; Instead you could set a parent container for your boxes, and position each box based on that.
Have you set the overflow of the boxes?
here is a simple template...
With a bit of luck this will help solve your bug.
Hum i don't know if your forgot to print here, but you have a div tag not closed.
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
I am new to JQuery, and I am attempting writing code using PHP, HTML, and JQuery.
I want to replace all of the <?php echo $var; ?> in my HTML with tags that have id's, instead. For example, I want to have something like <div id="name"></div> which would then use a $("#name") to have it display something in that div field.
My questions:
Does it have to be a <div> tag with that id when I call the #name in jquery? Or can it be in any tag and still have the same effect? --Would this work as well: </div>.
What if I want to put tags with id's to replace the alink--What tags would be good for that?
Any help appreciated.
You can add an id to any field. However, you can only use that particular id ONCE per page.
Ex.
<div id="name"></div>
<p id="name"></div>
<a id="name"></a>
The above is invalid and will cause problems if you use $('#name') in your jQuery. If you want to alter multiple things, like shown above, you are better off using a class and a different kind of selector:
<div class="name"></div>
<p class="name"></div>
<a class="name"></a>
$('.name')
This will select both of the elements.
An id can be an attribute of any html tag (element).
It also must be completely unique to the html document at any given time.
<?php echo $var; ?> however is not html at all, it is PHP which is something separate all together.
It can be any tag (=element), not just divs.
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.