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>
Related
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.
I have a page using JqueryUI Mobile. More specifically it uses JqueryMobile Lists
http://demos.jquerymobile.com/1.2.1/docs/lists/lists-ul.html
I love the look, feel, and usage of the listview, but I have come into a problem.
The users need to be able to click the link quickly, which is difficult with how I do it now. The link performs a PHP function, then redirects back to page they was on and the cycle restarts. Now that I am getting more familiar with AJAX, I would like to be able to have them click the link, it updates the database, then calls my AJAX script to update the data without the refreshing the page.
This would enable the users to be much much quicker with the tasks as most of the down time they have currently is the few seconds it takes to refresh (or more accurately be redirected back to) the page. When if its possible they would like to be able to click a link every second or even more if they are able to.
My question is: How can perform a database update based on dynamically generated links from a MySQLi database without requiring the user to refresh? I believe once I have that, I could also use Ajax to update the list every quarter second or so. I've considered using buttons, but I'm not sure how that would tie into listview, since listview seems to be only based on links.
On a side note - are their standard practices with often Ajax should update? Is there any guidelines I should follow?
Here is a sample of my current code:
<?php
session_start();
if(isset($_SESSION['username']))
{
}
else
{
$_SESSION['error']="You are logged in.";
header('Location: index.php');
exit;
}
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<style>
.split-custom-wrapper {
/* position wrapper on the right of the listitem */
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.split-custom-button {
position: relative;
float: right; /* allow multiple links stacked on the right */
height: 80%;
margin:10px;
min-width:3em;
/* remove boxshadow and border */
border:none;
moz-border-radius: 0;
webkit-border-radius: 0;
border-radius: 0;
moz-box-shadow: none;
webkit-box-shadow: none;
box-shadow: none;
}
.split-custom-button span.ui-btn-inner {
/* position icons in center of listitem*/
position: relative;
margin-top:50%;
margin-left:50%;
/* compensation for icon dimensions */
top:11px;
left:-12px;
height:40%; /* stay within boundaries of list item */
}
.ui-icon-delete:after{
background-color: #B22222 !important;
background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.ui-icon-home:after{
background-color: #A2CD5A !important;
}
.ui-icon-arrow-u-r:after{
background-color: #3D59AB !important;
}
</style>
</header>
</head><center> <h2 style="">Empty For now<br><br>
</h2></center>
<a href="home.php" class="ui-btn ui-icon-home ui-btn-icon-left" data-ajax='false'>HOME</a>
<a href="ViewOrderMobile.php" class="ui-btn ui-icon-edit ui-btn-icon-left" data-ajax='false'>VIEW / EDIT CURRENT LINE</a>
<br><br><br><br>
<center><center>
<div data-role="main" class="ui-content"style="margin-top:-75px;">
<h2 style=""></h2>
<ul data-role="listview">
<?php
include "../../includes/databaseconnections/demo/database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
else{}
$query = "SELECT * FROM Table1 LEFT JOIN Table2 USING (ID) WHERE Table1.feild1 = '0' ORDER BY dateSelected ASC LIMIT 25";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
if ($row['photoLink'] == NULL)
{
$row['photoLink'] = "endofgroup";
$row['lastName'] = "End Of Group " ;
$ID = "&ID=".$row['ID'];
}
if ($row[leftGym] == "1") { $flash = "style='color:#B22222;font-size:140%'";} else {$flash ="";}
echo "<li><a href='button1.php?sid=${row['ID']}' $flash style='font-size:140%;' width='25px' data-ajax='false'> {$row["lastName"]}, {$row["firstName"]} ({$row["pmBusNumber"]})</a><div class='split-custom-wrapper'>
<a href='button2.php?sID={$row['ID']}&lane=1{$ID}' data-role='button' class='split-custom-button' data-icon='delete' data-rel='dialog' data-theme='c' data-ajax='false' data-iconpos='notext'></a>
</div></li>";
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
/////////////////////////////////////////////////////////////////////////////////
?>
</ul><br>
</div>
</div>
</div>
</body>
</html>
I've added comments to the code snippet. Please let us know if you require further info.
Based on jquery ajax() v3.1.1
html: update the a element in the list with class=myCustomClass
<a href='button1.php?sid=${row['ID']}' $flash style='font-size:140%;' width='25px' data-ajax='false' class='myCustomClass'> {$row["lastName"]}, {$row["firstName"]} ({$row["pmBusNumber"]})</a>
<div class='split-custom-wrapper'>
<a href='button2.php?sID={$row['ID']}&lane=1{$ID}' data-role='button' class='myCustomClass split-custom-button' data-icon='delete' data-rel='dialog' data-theme='c' data-ajax='false' data-iconpos='notext'>
</a>
</div>
<span id="status"></span>
script :
$(function () {
//Attach the click event to Links only with class=myCustomClass and perform this function
$("a[class=myCustomClass]").on('click', function (e) {
e.preventDefault(); //preven the page from navigating, the default behaviour for a link
$.ajax({
url : this.href, //perform a ajax request with the link, GET in this case
/* type: POST, */
beforeSend : function () {
$("#status").text('Working..')
}
}).done(function (data) {
console.log(data); //do something with the data if any
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log("ERROR"); //report in console for errors
console.info(jqXHR);
console.info(textStatus);
console.info(errorThrown);
}).always(function () {
//do this step every time
$("#status").text('completed..')
console.info("completed"); irrespective of result
});
})
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
}
How can I achieve a five star rating functionality using css.
I have some html:
<span class="rate-this-stars">
<h5>Rate this page</h5>
<ol class="rate-this-stars-list">
<li class="star" value="5"></li>
<li class="star" value="4"></li>
<li class="star" value="3"></li>
<li class="star" value="2"></li>
<li class="star" value="1"></li>
</ol>
</span>
And some additional css which gives me this:
I then have a css hover state which swaps the grey star with a pink star:
span.stars ol li:hover {
background-image: url(../images/starHover.png);
}
Output:
So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.
I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.
My css skills are a bit rusty. Any suggestions on how to achieve this functionality.
I Got This
Javascript to get the ratings
$(document).ready(function() {
$("form#ratingForm").submit(function(e)
{
e.preventDefault(); // prevent the default click action from being performed
if ($("#ratingForm :radio:checked").length == 0) {
$('#status').html("nothing checked");
return false;
} else {
$('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
}
});
});
DEMO1
Using Css DEMO2
use mouseover event to programmatically select the rest
mouseover: function () {
var sel = this.value:
var options = $('ol li');
for (var i = 1; i < sel; i++) {
options[i].css('background-image', 'url(../images/starHover.png)')
}
}
here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result.
The trick is in css on hover!
On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one.
In your example it will look something like this
.rate-this-stars-list:hover .star{
color: orange;
}
and then all stars after selected one:
.rate-this-stars-list .star:hover ~ .star{
color: #ddd;
}
but, you can find full working 5 stars rating example with Angular implementation on this link:
https://floyk.com/en/post/angular-star-rating-example
One option for doing that is using CSS Sprite + JS.
The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.
If you want something simpler, just have 6 separate images and change the background image according to the mouse position.
To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.
An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):
http://codepen.io/anon/pen/rkhcJ
HTML
<div id="container">
<div id="1" class="star">1</div>
<div id="2" class="star"></div>
<div id="3" class="star"></div>
<div id="4" class="star"></div>
<div id="5" class="star"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
CSS:
.star{
float:left;
height: 100%;
width: 20%;
}
#container{
background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
width: 226px;
height: 50px;
background-color: #c34;
background
}
JS
$("#1").mouseover(function(){
$("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
$("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
$("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
$("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
$("#container").css('background-position', '0px -190px');
});
$(".star").mouseout(function(){
$("#container").css('background-position', '0px 0px');
});
<style>
.star {
font-size: x-large;
width: 50px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content:'\2605';
}
.star.on {
color: red;
}
.star.half:after {
content:'\2605';
color: red;
position: absolute;
margin-left: -20px;
width: 10px;
overflow: hidden;
}
</style>
<div class="stars">
<?php
$enable = 5.5; //enter how many stars to enable
$max_stars = 6; //enter maximum no.of stars
$star_rate = is_int($enable) ? 1 : 0;
for ($i = 1; $i <= $max_stars; $i++){ ?>
<?php if(round($enable) == $i && !$star_rate) { ?>
<span class="<?php echo 'star half'; ?>"></span>
<?php } elseif(round($enable) >= $i) { ?>
<span class="<?php echo 'star on'; ?>"></span>
<?php } else { ?>
<span class="<?php echo 'star'; ?>"></span>
<?php }
}?>
</div>
I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:
https://github.com/zamicol/rating
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