This is regarding this question i asked on this link:PHP CSS Colour Shuffle array?
I have changed and added more code and have a different question hence why i've opened a new thread.
I am using php and jQuery to shuffle colours every time the page is refreshed. At the moment this works fine. But i have a jQuery function where i grab some elements and on a hoverstate show the shuffle colour. Now this does work but it's showing css standard default red,blue,green ect and not even displaying colours for the orange. I have been advised to create a variable and then create an if function and pass the variable through the hover function. Below is what i have so far, im a novice user at jQuery so i am unsure of where i am going wrong or where to go next, can someone guide me to why this is broken? My firebug shows no errors and i think im nearly there! Thanks.
PHP Shuffle colours:
<?php
$colours = array('red', 'green', 'blue', 'black');
$blog = $colours[array_rand($colours, 1)];
?>
<body id="<?php echo $blog; ?>">
In my css wherever i wanted to show the shuffle colour #green, #red is before the actuallid,class or element and it works! Just the hover states now where i have this jQuery..
// colour rollover navigation
var colours = "<?php echo $colours; ?>";
if(colours == "red"){
colours = "#600";
}
else if(colours == "green"){
colours = "#363";
}
else if(colours == "blue"){
colours = "#369";
}
else if(colours == "black"){
colours = "#000";
}
//example of some elements that would use the hover effect
$("#footer .address #breadcrumbs a").hover(function() {
$(this).stop().animate({ 'color': colours }, 300);
},function() {
$(this).stop().animate({ 'color': "#fff" }, 300);
});
Am i missing some lines in the if else or passing the variable through wrong? Thanks!
I presume the JS is in script tags on the page.
You can't just echo out an array. I'm guessing you meant to echo $blog. That should pass a single color as string data to be picked up by your if () {} else {} statements (should be switch () { case } really).
Ok i have it working.
I did some things so not sure exactly what totally fixed it:
-Clear Cache (Google Chrome is a pain for this)
-Changed the variable from Colours to color (both in php and JS)
-When defining the variable in JS i echoed $blog instead of $colour.
I get no errors when this works as well.
Thanks!
Related
I've got a a-tag dynamically populated which extracts data from a database and multiplies to the number of records existing. So this to be looked at more like an item in a list.
echo "<a class='Keylist ".$wecb_color."' id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
I'm trying to keep one of the a-tags background set on a different color when a user clicks. Behavior I'm trying to achieve is when a user scrolls and clicked on one link, that a-tag to remain selected depicting a different background color.
I've written snippet trying to do that.
$wecb_color ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_color = 'changetogreen';
}
}
The issue is this makes all the a-tag's which are generated having a background color changed to green instead the one that user clicks.
Hard coded CSS script reads as :- .changetogreen{background-color: green;}
Any thoughts appreciated.
It'd change the background color of all links because you're changing the whole class style.
Try this:
echo "<a class='"Keylist " style=" '.$wecb_style.' ;" id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
So you can change the style of particular tag.
And PHP would be:
$wecb_style ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_style = 'background: green';
}
}
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 seek a simple way to call a php file using jquery.
The ultimate outcome has to do with a Magento site I am working on:
http://bouquetsco.com/flowersplants.html
^^This page
This page displays products: 3 in a row.
<?php $this->setColumnCount(3); ?>
<?php $this->setColumnCount(2); ?>
^^This php code manually sets the number of product columns.
By default the page displays 3 wide, which looks fine until the browser window re-sizes down to tablet width (760px or so). When the website's design is tablet size (760px or so) I would like to display only two columns of products.
To do this, it seems one must use javascript to determine the window width, then run some php code depending on the browser-window width... like
this...
if ( browser-window-widith > 760) { get '3-column.php' }
else { get '2-column.php' }
This is grossly over-simplified.
What would this code logic look like? How would one write this functionality?
Also, one could change the initial if statement to:
if (browser-window-width < 760) { get '2-column.php' }
else { get '3-column.php' }
====================================
There would exist two .php files (2-column.php, & 3-column.php)
Each contains:
<?php $this->setColumnCount(2); ?>
or
<?php $this->setColumnCount(3); ?>
The code would call one file or another depending on the browser window width, (which would be found by the javascript) and thus result in
3-column product list for displays > 760px
and
2-column product list for displays < 760px
I use this on the login page of my site:
if(!isset($_GET['width']))
{
echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
}
else
{
$_SESSION['screen_width'] = $_GET['width'];
$_SESSION['screen_height'] = $_GET['height'];
}
Now the width and height are saved to the current session, and I can do a condition check before displaying the page division.
if($_SESSION['screen_width']>= '1400')
{
$this->setColumnCount(3);
}
else
{
$this->setColumnCount(2);
}
You can use jquery width and some ajax calls.
index.php
<html>
....
<div id="somedivport"></div>
<--! if that script is used the above div will load differently depending on the width-->
</html>
script.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//or use this$(document).width();
$("#somedivport").load(width>$(window).width()?"/3-column.php":"/2-column.php");
});
</script>
Edit for reducing kloc
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