Trying to use a variable with style to set a position.
Have researched it, but have yet to find an answer.
<div href="#" id="FabofLifeBox" style="position-top: "+ $ptop; +" position-left: "+$pleft; +" class="zoom">
the $ptop and the $pleft are the variables I am trying to set the position in the style statement.
Just open and close PHP tags and this is very straightforward.
... your php code ?>
<div id="FabofLifeBox" style="top:<?php echo $ptop; ?>px;left:<?php echo $pleft; ?>px;" class="zoom">
<?php ...your php code continues
Just mind that your are opening and closing PHP in the right places and this works.
ps... position-top and position-left are not valid CSS properties, I changed to top and left. div tag also does not support href attribute.
Try blending Javascript and PHP, an example of setting the position-top:
//php variable declared up here
<html>
<body>
<h2>Use JavaScript</h2>
<p id="FabofLifeBox">This some random text</p>
<script>
document.getElementById("FabofLifeBox").style="position-top:<?php echo $ptop ?>";
</script>
</body>
</html>
The PHP you added in the comments to the question would work (except for the missing semicolons between the style parameters), but there is no position-top or position-left parameter in CSS. Try something like this instead:
echo '<div href="#" id="FabofLifeBox" style="top: '. $ptop .'; left: ' . $pleft . ';" class="zoom">';
Related
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I have php file index.php
In this file to use html code I am doing:
index.php
echo '
<div>
<a class="fragment" href="">
<div>';
In href I want to put value of some php variable i.e. $url How could be done?
is this correct way?
<a class="fragment" href="<?php echo $url; ?>">
You concatenate the string by ending it and starting it again:
echo '
<div>
<a class="fragment" href="' . $url . '">
<div>';
Though I personally prefer to stop the PHP tags and start them again (if I have a lot of HTML) as my IDE won't syntax highlight the HTML as it's a string:
?>
<div>
<a class="fragment" href="<?php echo $url; ?>">link</a>
</div>
<?php
Since you are printing several lines of HTML, I would suggest using a heredoc as such:
echo <<<HTML
<div>
<a class="fragment" href="$url">
<div>
HTML;
HTML can be anything as long as you use the same tag both in the beginning and the end. The end tag must however be on its own line without any spaces or tabs. With that said, specifically HTML also has the benefit that some editors (e.g. VIM) recognise it and apply HTML syntax colouring on the text instead of merely coluring it like a regular string.
If you want to use arrays or similar you can escape the variable with {} as such:
echo <<<HTML
<div>{$someArray[1]}</div>
HTML;
if you are echoing php directly into html i like to do this
<div><?=$variable?></div>
much shorter than writing the whole thing out (php echo blah blah)
if you are writing html in php directly then there several options
$var = '<div>'.$variable.'</div>'; // concatenate the string
$var = "<div>$variable</div>"; // let php parse it for you. requires double quotes
$var = "<div>{$variable}</div>"; // separate variable with curly braces, also requires double quotes
Do it like
<?php
$url='http://www.stackoverflow.com';
echo "<div><a class='fragment' href='$url' /></div>";
If you want to maintain the echo statement you can do either
echo '<a class="fragment" href="'.$url.'"><div>';
or
echo "<a class=\"fragment\" href=\"$url\">";
The first is better for performances and IMHO is more readable as well.
If you want to input/output large blocks of HTML with embedded variables you can simplify the process by using Heredocs:
echo <<<_EOI_
<div>
<a class="fragment" href="$url">
<div>
_EOI_;
You don't have to worry about escaping quotes, constant concatenation, or that ugly dropping in and out of <?php echo $var; ?> that people do.
Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.
I have the following code (I formated it to more lines, but in my source code I have it in one line, because innerHTML doesn't like new lines somehow - but that isn't the problem...):
<?php
echo "
<img
src='1.png'
onclick='
document.getElementById(\"my_div\").innerHTML=\"
<img src=\\\"1.png\\\" onclick=\\\"alert(\\\\\\\"text\\\\\\\");\\\" />
\";
'
/>
";
?>
And somewhere in the body I have :
<div id="my_div"></div>
So, when I click on the image, i'll have the same image inside my_div. The problem is, that when I click on the 2nd image, javascript doesn't alert anything.
But when I change this:
alert(\\\\\\\"text\\\\\\\");
to this:
alert(MyText);
and add JavaScript variable MyText:
<script>
MyText = "text";
</script>
it now works.
I think the problem is with those nested quotes:
\\\\\\\"
(level 4). Any ideas? Thanks.
EDIT: please don't post here another methods of doing this, I'd like to know why those quotes doesn't work here..
SECOND EDIT: I need that php there, because this is only a piece of my code (in full code I need it to display images in cycle...)
If you want a quote character as data (instead of as an attribute delimiter) in HTML, you represent it as " not \"
There's nothing "dynamic" in your script - you're not inserting PHP variables, so why build that all from within a PHP echo? Simply have:
Or if you want to make it even cleaner:
<script type="text/javascript">
function addImg() {
document.getElementById('my_div').innerHTML='<img src="1.png" onclick="alert(\'text\')" />';
}
</script>
<img src="1.png" onclick="addImg()" />
refactor your JS into an external file (with a function that will do the onclick logic), and try outputting something simpler with php's echo
Use jQuery!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="my_div"></div>
<img src="1.png" class="my_img" />
<img src="2.png" class="my_img" />
<img src="3.png" class="my_img" />
<script type="text/javascript">
jQuery(function() {
$('.my_img').click(function() {
$('#my_div').html($(this).clone().unbind());
alert('text');
});
});
</script>
I am using following a tutorial from here: http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
This is the script I use:
<script type="text/javascript" language="javascript">
$(function() {
// SETUP:
// When the info banner is clicked:
$('#setup').click(function() {
$('#intro').css("display","none");
$.cookie('intro', 'collapsed');
});
// COOKIES
// Info banner state
var intro = $.cookie('intro');
// READ THE COOKIES
if (intro == 'collapsed') {
$('#intro').css("display","none");
};
});
</script>
The script hides the following div as the cookie is read:
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
Everything work great but when the page loads the div is shown for a split second. I guess the solution is to present two different pieces of markup serverside according to the cookie info. I have no idea how to go about this.
On page load, you could use php to check the cookie, and then add a hidden class. Something like <div class="<?= $_COOKIE['intro'] == 'collapsed' ? 'hidden':'' ?>">
Edit:
In CSS then, you can add something like .hidden { display: none; } and use jQuery to add or remove that class.
You could just do something like:
<?php
if($_COOKIE['intro'] != 'collapsed') {\
//echo div...
}
if you are using PHP:
<?php if($_COOKIE['intro'] != 'collapsed'){ ?>
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
<?php } ?>
To completely remove the div rather than just hide it.
check $_COOKIE array for 'intro'
if ($_COOKIE['intro'] == 'collapsed')
//...
simply, add some kind of "hidden" class to the div, or specify it like style="display: none;"
//edit
actually, by adding the "style" attribute you ensure that the div is not displayed as soon as get parsed, while using "class" property might cause interval while waiting for CSS file.
thus
<div<?= ($_COOKIE['intro'] == 'collapsed') ? ' style="display: none"' : '' ?>> ..</div>
is best here.