I have some jquery question :
First my php code :
<?php
for($C=1; $C <= 9; $C++)
{
echo '<div id="couvert_'.$C.'" style="width:100px;height:30px;float:left;padding-top:10px;padding-left:0px;padding-right:10px;margin:4px 4px 4px 4px;cursor:pointer;text-align:center;background-color:#dfdfdf;">'.$C.'</div>';
}
?>
I generate 9 div element.
I would like to generate jquery script to :
- select one of those div
- change background color of my selected div with #FF7E15
- let the others div with background color #dfdfdf
DO you have an idea ?
Thank you very much.
at the end of your php script use this jquery script:
<script>
//now maybe you want to change the selected div with the mouse?
$("div").click(function(e){
//loop over the divs and set them to the std. color
$("div").each(function(e){
$(this).css("background-color","#dfdfdf");
});
//set the current clicked div to the right color
$(this).css("background-color","#ff7e15");
});
</script>
<script>
jQuery(document).ready(function(){
$('.convert').click(function(){
$(this).css('background-color', '#FF7E15');
});
})
</script>
<?php
for($C=1; $C <= 9; $C++)
{
echo '<div class="convert" id="couvert_'.$C.'" style="width:100px;height:30px;float:left;padding-top:10px;padding-left:0px;padding-right:10px;margin:4px 4px 4px 4px;cursor:pointer;text-align:center;background-color:#dfdfdf;">'.$C.'</div>';
}
?>
Mad answer
PHP:
<?php
for($C=1; $C <= 9; $C++)
{
echo '<div id="couvert_'.$C.'" style="width:100px;height:30px;float:left;padding-top:10px;padding-left:0px;padding-right:10px;margin:4px 4px 4px 4px;cursor:pointer;text-align:center;background-color:#dfdfdf;">'.$C.'</div>';
}
?>
jQuery + PHP:
<?php
$magicElement = 3;
echo "$(\"#couvert_" . $magicElement . "\").css(\"background-color\", \"#FF7E15\")";
?>
Related
I am trying to echo pagenumbers in html. Below is the code. It does echo,
but numbers are always on left side of the page. Then I created a div to
center it, it did, but then all numbers are div. When user clicks on
numbers, basically, div gets clicked. I want user to be able to click on
each page number with page numbers at the center of the page.
<html>
<body>
<?php
for ($i = 1; $i <= $total_pages; $i++) { // print links for all pages
echo '<a href="getjobs.php?function_Options[0]='.$q.'& function_Options[1]='.
$q1.'&state_Options[0]='.$qq.'&state_Options[1]='.
$qq1.'&state_Options[2]='.$qq2.'&state_Options[3]='.
$qq3.'&state_Options[4]='.$qq4.'&state_Options[5]='.
$qq5.'&page='.$i.'"';
if ($i==$page) echo " class='curPage'";
echo " style='color: white; font-size: 20pt;'>".$i."</a> ";
};
?>
</body>
</html>
<div class="pageNr">
<?php
for ($i=1; $i<=$total_pages; $i++) { // print links for all pages
echo('<a href="getjobs.php?
function_Options[0]='.$q.'&
function_Options[1]='.$q1.'&
state_Options[0]='.$qq.'&
state_Options[1]='.$qq1.'&
state_Options[2]='.$qq2.'&
state_Options[3]='.$qq3.'&
state_Options[4]='.$qq4.'&
state_Options[5]='.$qq5.'&
page='.$i.'"');
if ($i==$page) echo " class='curPage'";
echo " style='color: white; font-size: 20pt;'>".$i."</a> ";
};
?>
</div>
So you just need to make the width of your div like a couple of pixels and let it float right... this should work.
And just a little tip: best practice is that you don't use inline css...
So, I've set up a plugin that allows my client to be able to add metaboxes with a button and therefore add new content that is more dynamic, with additional titles/headings etc. This is how it's set up right now...
function Print_price_fileds($cnt, $p = null) {
if ($p === null){
$a = $b = $c = '';
}else{
$a = $p['n'];
$b = $p['d'];
$c = $p['p'];
}
return <<<HTML
<li>
<input type="text" name="additional_content[$cnt][d]" size="50" value="$b" placeholder="Title"/>
<textarea name="additional_content[$cnt][p]" class="wp-editor-area" style="height: 320px; width: 100%; margin-top: 37px;" autocomplete="off" placeholder="Content">$c</textarea>
<span class="remove submitdelete deletion">Remove</span>
</li>
HTML
;
}
function additional_content_boxes(){
global $post;
$data = get_post_meta($post->ID,"additional_content",true);
echo '<div>';
echo '<ul id="additional_content_items">';
$c = 0;
if (count($data) > 0){
foreach((array)$data as $p ){
if (isset($p['p']) || isset($p['d'])|| isset($p['n'])){
echo Print_price_fileds($c,$p);
$c = $c +1;
}
}
}
echo '</ul>';
?>
<span id="here"></span>
<span class="add button button-primary button-large"><?php echo __('Add Additional Content'); ?></span>
<script>
var $ =jQuery.noConflict();
$(document).ready(function() {
var count = <?php echo $c - 1; ?>; // substract 1 from $c
$(".add").click(function() {
count = count + 1;
$('#additional_content_items').append('<? echo implode('',explode("\n",Print_price_fileds('count'))); ?>'.replace(/count/g, count));
return false;
});
$(".remove").live('click', function() {
$(this).parent().remove();
});
});
</script>
<style>#additional_content_items {list-style: none; padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-top: 30px; display: block;}</style>
<?php
echo '</div>';
}
This works just fine right now, but I'd like to be able to add the wp_editor to the additional metaboxes, thereby replacing the <textarea>. How can I make this happen?
Thanks guys.
J
So, I took Noman's advice and I'm using the Advanced Custom Fields plugin. Don't know why I hadn't heard of it before, because it's perfect. Thanks everyone!
https://wordpress.org/plugins/advanced-custom-fields/
The problem can be shown here. I was experimenting with thousands of fixed div boxes to create a randomly generated background. I am aware this has a big impact on performance.
However, I was wondering if there was any solution to the strange white lines in the background of my webpage. I am almost 100% certain there is nothing wrong with my php & css that is determining where the boxes are placed in my background but, here it is just in-case.
define('ROWS', 100);
define('COLUMNS', 100);
$boxes = array();
for($i = 0; $i < ROWS; $i++) {
$boxes[] = array();
for($j = 0; $j < COLUMNS; $j++) {
$boxes[$i][$j] = randColor();
?>
#back<?php echo $i*COLUMNS + $j; ?> {
background: #<?php echo $boxes[$i][$j]; ?>;
width: <?php echo 100.0/COLUMNS ?>%;
height: <?php echo 100.0/ROWS ?>%;
left: <?php echo $j * 100.0/COLUMNS?>%;
top: <?php echo $i * 100.0/ROWS ?>%;
position: fixed;
z-index: -300;
}
Try instead using <canvas> and split the canvas up in pieces instead of divs. It is a rectangular area in a HTML file on which you can draw anything including parts.
Example: Draw a Circle
Javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Html
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
I've downloaded this tutorial http://megarush.net/5-star-rating-system-with-php-mysql-jquery-and-ajax/ but I'm getting these errors:
Notice: Undefined variable: rat in C:\xampp\htdocs\rating\rating.php on line 37
Notice: Undefined variable: v in C:\xampp\htdocs\rating\rating.php on line 41
<?php
include("settings.php");
connect();
$ids=array(1,2,3);
?>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="rating.css" />
<script type="text/javascript" src="rating.js"></script>
</head>
<body>
<?php
for($i=0;$i<count($ids);$i++)
{
$rating_tableName = 'ratings';
$id=$ids[$i];
$q="SELECT total_votes, total_value FROM $rating_tableName WHERE id=$id";
$r=mysql_query($q);
if(!$r) echo mysql_error();
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
$j=$i+1;
$id=$ids[$i];
echo'<div class="product">
Rate Item '.$j.'
<div id="rating_'.$id.'" class="ratings">';
for($k=1;$k<6;$k++){
if($rat+0.5>$k)$class="star_".$k." ratings_stars ratings_vote";
else $class="star_".$k." ratings_stars ratings_blank";
echo '<div class="'.$class.'"></div>';
}
echo' <div class="total_votes"><p class="voted"> Rating: <strong>'.#number_format($rat).'</strong>/5 ('.$v. ' vote(s) cast)
</div>
</div></div>';}
?>
</body></html>
$rat and $v are being defined within the scope of your while loop.
If you declare them globally (outside the loop), the rest of your code will recognize them.
$rat = 0;
$v = 1;
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
See here:
http://bgallz.org/988/javascript-php-star-rating-script/
This combines a Javascript code that generated the URL for the different ratings given as well as the change in display for the stars before and after a rating is given.
An overlay DIV is displayed after the rating is given so that no immediate ratings can be given by the same. It also stores the user's IP address with the rating submission to prevent multiple ratings from one user.
This is a simple and easy to use script with just Javascript and PHP for star rating.
The problem is because of scoping of those variables. When you are trying to echo those variables outside the while loop; PHP can not find the varables as they were created (and assigned) inside the loop. To solve this, just assign a blank value to both variables outside too:
if(!$r) echo mysql_error();
$rat = 0;
$v = 1; // In case there are no records.
while($row=mysql_fetch_array($r))
{
$v = $row['total_votes'];
$tv = $row['total_value'];
$rat = $tv/$v;
}
Add this at line at beginning to nide notice error in your code .
error_reporting(E_ALL ^ E_NOTICE);
Most of time notice error do not affect the program.
In case if your votes are not recording then delete your cookies and try to vote from different IP address .This script has a feature to not accept votes from same ip or vistitor to avoid multiple votes by same users on same product.
var cname=document.getElementById(id).className;
var ab=document.getElementById(id+"_hidden").value;
document.getElementById(cname+"rating").innerHTML=ab;
for(var i=ab;i>=1;i--)
{
document.getElementById(cname+i).src="star2.png";
}
var id=parseInt(ab)+1;
for(var j=id;j<=5;j++)
{
document.getElementById(cname+j).src="star1.png";
}
Code from http://talkerscode.com/webtricks/star-rating-system-using-php-and-javascript.php
<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 am currently working on this tutorial and would like to add a filter button to it.
I am using jquery to make an element clickable:
<p id="marketing">MARKETING</p>
and the jquery for the element:
// Sort content Marketing
$("#pagination p").click(function () {
Display_Load();
//Loading Data
var pageNum = this.id;
$("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
});
The problem that I am getting is when clicking on the paragraph tag will go to 'filter_marketing.php?page=' but will not work (i.e. displays nothing) since the 'var pageNum' is not defined.
the php code for pageNum looks like this:
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
Im just unsure how to make a button 'marketing' and clicking on it goes to the php page and gets the results in mysql db and displays it with the pagination.
if anyone can help on this, that would be great.
P.S. check the entire script of the tutorial to see the entire structure and how it works.
Tutorial
Edit: Here is the code:
Pagination.php:
<?php
include('config.php');
$per_page = 3;
//Calculating no of pages
$sql = "select * from explore where category='marketing'";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<style>
body { margin: 0; padding: 5; font-family:Verdana; font-size:10px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading {
width: 100%;
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
td{
border:solid 1px #dddddd;
padding:5px;
}
</style>
<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<p id="marketing">MARKETING</p>
</ul>
<br />
<br />
jquery_pagination.js
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='bigLoader.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
// Editing below.
// Sort content Marketing
$("#pagination p").click(function () {
Display_Load();
//Loading Data
var pageNum = this.id;
$("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
});
});
filter_marketing.php:
<?php
include('config.php');
$per_page = 3;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$sql = "select * from explore where category='marketing' order by category limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['site_description'];
$site_price=$row['site_price'];
?>
<tr>
<td><?php echo $msg_id; ?></td>
<td><?php echo $message; ?></td>
<td><?php echo $site_price; ?></td>
</tr>
<?php
}
?>
</table>
<?php
//Pagination Numbers
for($mktg=1; $mktg<=$pages; $mktg++)
{
echo '<li class="mktg" id="'.$mktg.'">'.$mktg.'</li>';
}
The problem that I am getting is when
clicking on the paragraph tag will go
to 'filter_marketing.php?page=' but
will not work (i.e. displays nothing)
since the 'var pageNum' is not
defined.
When trying the example page I just get correct page numbers, as shown by Firebug's Net panel. The strange thing I see is that results 10-12 are not shown, i.e. page 1 has results 1-9 and page 2 shows results 13-23 (you should really make it 10 or 20 results per page).
Im just unsure how to make a button
'marketing' and clicking on it goes to
the php page and gets the results in
mysql db and displays it with the
pagination.
Where is 'marketing' in your source code? Can you provide an example of this? I just don't understand this question.
EDIT: I still don't understand this. #marketing hasn't been assigned an onclick-event. Moreover, I would use a button in a form like <input type="submit"> and attaching an onclick-event to it in your JavaScript. That function can call your PHP via AJAX or go to a different URL, returning false when successful to prevent the default action (or just let the button submit your form in the regular way).