I'm having some post in php, my table is configuring like this:
while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
$id = $row['id'];
$title1 = $row['title1'];
$thumb = $row['thumb'];
$link = $row['link'];
$hex = $row['hex'];
$archiveID= $row['archiveID'];
$recordListingID= $row['recordListingID'];
?>
With that, each item have a specific image, color, etc
Which I display int he front-end like that:
<div id="artist-image">
<img src="<?php echo $thumb ?>"></img>
</div></a></li>
<?php
}
?>
On hover a title, the image of the post display, using jquery:
$('#artistlistdesktop ul li a').hover(function(){
$(this).children('#artist-image').toggleClass('active');|
It's all working fine, but what I'm trying to achieve is on hover a title, to change the color of the title with the hex color assign previously in php via $hex = $row['hex'];
I tried the following css:
#artistlistdesktop li > a:hover{
color:#<?=$hex?>;;
}
but it's changing into the same color to all the list instead of the color assign.
Do you know how can I achieve this?
----EDIT ----
original color is light grey which is this css:
#artistlistdesktop li > a {
display: block;
text-decoration: none;
font-family: Arial Black, Arial, Helvetica, sans-serif;
color: rgba(146,146,146,0.5);
font-weight: bolder;
line-height: 35px;
font-size: 53px;
letter-spacing: -5px;
padding: 0;
margin: 0;
}
--EDIT 2 --
I got it via:
<li><a onMouseOver="this.style.color='#<?php echo $hex ?>'"
onMouseOut="this.style.color='rgba(146,146,146,0.5)'"
id="" target="_blank" href=" ">
You should apply style=":hover{color: #<?=$hex?>;}" in your object !
First of all, img is a self-closing tag. Check example here.
What's more, are you sure that the $hex value is a string?
I've tested and it seems to be working like that:
<?php
$id = 1;
$link = "http://example.com";
$title1 = "This is a link";
$hex = "ff0000";
?>
<style>
li > a:hover{
color:#<?=$hex?>;
}
</style>
<li><a id="<?php echo $id ?>" target="_blank" href="<?php echo $link ?> "><?php echo $title1 ?></a></li>
EDIT: https://jsfiddle.net/goran90/z1e7d3mv/1/ - Here's an alternative for what you are trying to achieve. Although, it's not a best practice, but in your case it should do the trick. You only need to set a data attribute with the corresponding color for each a element.
Related
I am trying to make code that lets me add checkmarks to clicked images from my database. I am able to get the images to display, however I am unable to select the image/get the check to appear.
index.php
<?php
$result = mysql_query("select * from db");
$count = 0;
while ($row = mysql_fetch_array($result)) {
$count++;
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['img']) . '" width="290" height="290" class = box>';
}
?>
click.js
$(document.ready(function(){
$('.box').live("click", function() {
if($(this).find('.check_image').length == 0){
$(this).append("<div class='check_image'><img src='check.png' /></div>");
}else{
$(this).find('.check_image').remove();
}
});
Ok so I would suggest getting CSS to do display the tick. It will mean wrapping your echoed img tab in a div (you can't use the pseudo selector :after directly on an img tag alas. I have used a font library (font-awesome) this is a great way of getting icons like ticks and trashcans etc into your pages. They scale and can be coloured.
as has been mentioned in other posts you are using some depreciated calls in both your PHP and jQuery. Have a play with this:
$('.clickable').on('click',function(e){
$(this).toggleClass('clicked');
})
.clickable.clicked:after{
font-family: FontAwesome;
content: "\f00c";
color:lime;
position:absolute;
top:2px;
right:2px;
font-size:40px;
text-shadow: -2px 3px 2px rgba(150, 150, 150, 0.8);
}
.clickable{
cursor:pointer;
position:relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickable" style="width:320px;height:240px;">
<img src="http://www.richardhulbert.com/wp-content/uploads/2011/04/New-Forest-11.jpg" alt="nice van bros!" />
</div>
I am creating a menu in php running off of input from a JSON file. The issue i'm running into is that i want the title to change color to green once they click anywhere in the div class "menu-item". Once the color is green I would also like for them to be able to click it and have it return to it's original state. I understand i need to utilize javascript or Jquery for this option but couldn't find it in any documentation. I feel like I'm missing something small and have looked all over but haven't been able to figure it out. any help is appreciated.
foreach ($obj as $menu_item) {
echo '<div class="menu-item">';
echo '<img class="food-item" src="'.$menu_item->{'image-url'}.'"><br/>';
echo '<p class="title" onclick="changeColor("title"); return false;">'.$menu_item->name.'</p><br/>';
echo '$'.$menu_item->price.'<br/>';
echo $menu_item->Description.'<br/>';
echo '</div>';
}
Jquery toggle will do it for you, see fiddle: https://jsfiddle.net/c259LrpL/24/
$(".menu-item").click(function() {
$(this).toggleClass("red");
});
CSS example:
.menu-item {
background-color: blue;
color: white;
}
.menu-item.red {
background-color: red;
color: blue;
}
I have a problem in running jquery . Here the table sample:
table database
id | name | value
1 data1 10
2 data2 20
3 data3 30
4 data4 40
5 data5 50
Here is my code:
<?php
$sql = "SELECT * FROM database ORDER BY id"
$result = $conn->query($sql);
while($row = $result->fetch_assoc())
{?>
<div id="flip">
<?php echo $row['name']?>
</div>
<div id="panel">
<?php echo $row['value']?>
</div>
<?php
}
?>
But the slide toogle jquery only execute once, on the first element. How to make slide toggle execute every row in while looping?
Here is my slidetoggle()Jquery:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
And the CSS :
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
Based on Jack A. answer, build first your HTML with classes instead of multiples IDs. Then, in your script, use jQuery.next() to find the next panel element and toggle it:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideToggle("slow");
});
});
Here is a jsfiddle illustrating this.
You are using the same id in multiple elements. Build a unique id for every element. E.g. flip1, flip2, etc. and panel1, panel2, etc.
You are creating multiple HTML elements with the same ID ("flip" and "panel"), which is not correct; IDs should be unique.
An alternative is to use a class instead of an ID:
while($row = $result->fetch_assoc())
{?>
<div class="flip">
<?php echo $row['name']?>
</div>
<div class="panel">
<?php echo $row['value']?>
</div>
<?php
}
JavaScript:
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
This will act on all of the elements simultaneously.
I want to print content in a div using Javascript and CSS. My main div is with id 'preview'. Content in a div taken from database using PHP and MySQL. In my print page don't get style of the div 'preview'. I want to open print screen in new window. Any body give any suggestion for these issue?
My page and print are
My code is given below.
<?php
error_reporting(0);
$host='localhost'; // Host Name.
$db_user= 'root'; //User Name
$db_password= '';
$db= 'excel'; // Dat
$conn=#mysql_connect($host,$db_user,$db_password) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
$sql = "select * from first order by id";
$rsd = #mysql_query($sql);
?>
<script type="text/javascript">
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
<style type="text/css" media="print">
#media print{ #preview{ height:100%;overflow:visible;} }
</style>
<style>
#my-list{
padding: 10px;
padding-left:15px;
width:auto;
margin:auto;
}
#my-list > li {
display: inline-block;
zoom:1;
*display:inline;
}
#my-list > li > a{
color: #666666;
text-decoration: none;
padding: 3px 8px;
}
</style>
<input type="button" value="Print" onClick="javascript:printDiv('preview')" />
<div id="preview" style="width:1000px; margin:auto;">
<ul id="my-list" >
<?php
$si=1;
while($fet=mysql_fetch_array($rsd))
{
?>
<li>
<div class="droppable2" style="border-color:#3300FF; border:solid #999999;
height:180px;width:180px;position:relative; " >
<div style="float:left;position:absolute; bottom:30px;" class="left">
<img src="img.png" >
</div>
<div style="float:right;">
<p style="color: #003399; font-size: 10px;
padding-right:5px; font-weight:800; ">www.selafone.net</p>
<table style="font-size:10px;" >
<tr> <td >USERNAME: </td> <td> <?php echo $fet['name']; ?> </td></tr>
<tr> <td>PASSWORD:</td> <td> <?php echo $fet['email']; ?></td></tr></table>
</div>
<div style="position:absolute;background-color:#FF0000;
padding-bottom:0px; bottom: 0; height:36px; ">
<div style="color:#FFFFFF; padding-left:30px; vertical-align:middle;
font-weight:100;padding-top:10px; font-size: 8px;">
<strong> International prepaid Calling Card</strong></div></div>
</div>
</li>
<?php
$si=$si+1;
}
?>
</ul>
</div>
Source: Background color not showing in print preview
this is copy/paste reply of #purgatory101 from the top url
"
The Chrome css property "-webkit-print-color-adjust: exact;" works appropriately.
However, making sure you have the correct css for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print css from your screen css. This is done via the #media print and #media screen.
Often times just setting up some extra #media print css is not enough because you still have all your other css included when printing as well. In these cases you just need to be aware of css specificity as the print rules don't automatically win against non-print css rules.
In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other css with higher specificity.
While I DO NOT endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
#media print {
.your_id {
color: white !important;
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
"
If you want to open new window with printing page you need to create this window. Something like this:
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML; // your div
var newWindow=window.open('','','width=600,height=600'); // new window
newWindow.document.write(divElements); // div → window
newWindow.document.close();
newWindow.focus();
newWindow.print(); // printing
newWindow.close();
}
You can put all your CSS rules like this:
#media screen {
// css rules for screen
}
#media print {
// css rules for print
}
I'm making a webpage where each page of it has a different background color.
Also, I'm using a PHP input for the header and the footer, which must change its background either according to the webpage. Problem is, how do I change the background-color of it since it is gonna always call the same include?
I thought about using PHP but I don't know why, it didn't worked. I also thought of using Javascript but I don't know much of it either. Can someone help me please?
The div from the header which I want to change its background-color is right below:
<div class = "background-header-top">
</div>
Now on CSS:
.background-header-top {
width: 100%;
height: 40px;
background-image: url("pattern-blue.png");
}
I want it to be come
.background-header-top {
width: 100%;
height: 40px;
background-image: url("pattern-pink.png");
}
You can do in the body:
<body style="background-image: url(<?php echo $image;?>);">
Or with javascript:
var body = document.getElementByTagName("body")[0];
body.style.Background = "url(image);";
More on PHP:
$base = basename($_SERVER['PHP_SELF']);
Then in body:
<body style="background-image: url(<?php echo ($base == "something.php) ? "image.png" : "image.jpg";?>);">
Let's make the color arrays:
<?
$input = array("pattern-red.png","pattern-pink.png","pattern-blue.png","pattern-yellow.png","pattern-green.png");
$rand_keys = array_rand($input, 1);
$bg=$input[$rand_keys[0]] . "\n";
?>
Then have your css get bg value from the random:
<style>
.background-header-top {
width: 100%;
height: 40px;
background-image: url("<?=$bg?>");
}
</style>
So your head:
<div class="background-header-top"></div>
Haven't tried yet, but should work. Tell me if it's not.
instead of defining background image you can do this in inline. but before you need to get page name using like this
lets consider you need image1.jpg as background when you are on home.php
$currentPage = $_SERVER['PHP_SELF'];
<div class = "background-header-top" style=" <?php if ($currentPage = 'home.php') { echo 'background-image: url(image1.jpg);'; } else { echo 'background-image: url(image1.jpg);'; } ?> "></div>
here is a clean version of the code for you to understand
<div class = "background-header-top" style=" <?php
if ($currentPage = 'home.php')
{
echo 'background-image: url(image1.jpg);';
} else
{
echo 'background-image: url(otherimage.jpg);';
}
?> ">
</div>
change the code as your requirement. this may work with ease
Let's try this:
<?php
$background_colors = array("red", "pink","gold","yellow","orange","green","blue");
$bg = $background_colors[array_rand($background_colors)];
?>
<style>
.background-header-top {
color:#fff;
width: 100%;
height: 40px;
background-color:<?=$bg?>;
}
</style>
<div class="background-header-top">Check this out!</div>
If you want to change the color to image, it still works!
Live Demo : http://codepad.viper-7.com/5H39AI