Toggle Text Color with Javascript - javascript

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;
}

Related

Edit the styling of a button (PHP & MySQL used to populate it) using Javascript

Good day,
I am building an e-commerce site.
I have used MySQL for the back-end database and PHP to populate the data and tables into my Website.
I have managed a way that when a product is succesfully sold that the innerText of that button (that leads to it's detailed page) changes from "View" to "SOLD".
I now want to use JavaScript to scan through the table and Find all the button that contain the word "SOLD" and change the styling of them.
*I think my main problem is that the data is puled through from the MySQL database and isn't 'fixed' into the HTML, which is why I think my code is not working.
Here are snippets of my relevant code:
This is the "button" that I want to change, if required condition is met.
<td id="view_button"><?php echo "<a id='isSold' href='/dynamic_page.php?id={$row['id']}'>{$row['View']}</a>"; ?></td>
Here is my attempt at the JavaScript:
const isSold = document.getElementById('isSold');
function ToggleSold(){
if(isSold.innerHTML === "SOLD"){
this.style.backgroundColor = "grey";
} else {
this.style.backgroundColor = "";
}
}
Please bare with me, I taught myself how to code over the last 6 months.
All help is appreciated!
I took the advice of the above comment to use PHP instead of JavaScript.
It has done the trick.
I'll post the code here, in case someone has the same issue:
<td id="view_button">
<a style="<?php if ($row['View'] == 'SOLD') {
echo 'color:rgb(128, 128, 128);
background: rgb(217, 217, 217);
border: 2px solid rgb(128, 128, 128);
font-size: 10px';
} else if($row['View'] == 'View') {
;
} ?>" href="<?php if($row['View'] == 'SOLD') {
echo '';
} else if($row['View'] == 'View') {
echo "/dynamic_page.php?id={$row['id']}";
} ?>">
<?php echo $row['View'] ?>
</a>
</td>

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.
I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen
Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

Applying class to jquery ui dialog

I have a jquery ui dialog which is initialised like this
jQuery("#dialog-message").dialog({
autoOpen: false,
modal: true,
width:500,
buttons: { Ok: function () {jQuery(this).dialog("close"); }}
});
This is opened when clicking on specified span id as given below
jQuery(document).delegate("#samno","click",function () {
var usin=jQuery(this).text();
jQuery.post("scripts/sample_counts.php",{"usin":usin}, function(data) {
jQuery('#dialog-message').html(data);
jQuery('#dialog-message').dialog('open');
return false;
});
});
Actual div of this message is this:
<div id="dialog-message" class="dialog" title="Counting Data"></div>
Following css are also there in the page:
.no-close .ui-dialog-titlebar-close { display: none;}
div.ui-dialog {
font-size:12px;
color:#333333;
}
.ui-dialog.table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
The data received from post request contains a table. I defined a class called msg_tble and tried to apply this on the table. But it is not working.
Any idea how to use css for the table in the dialog box?
As suggested by Arun P Johny I am sharing the table markup
echo "<table><tr><th>Counting Date</th><th>System ID</th><th>Counting Time(Sec)</th><th>CPM</th></tr>";
while($data2=mysql_fetch_array($result3)){
echo "<tr>";
echo "<td>".$data2['count_date']."</ts>";
echo "<td>".$data2['counter_id']."</td>";
echo "<td>".$data2['count_time']."</td>";
echo "<td>".$data2['cpm']."</td>";
echo "</tr>";
}
echo "</table>";
Instead of
.ui-dialog.table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
Try:
#dialog-message table {
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
With jQueryUI dialogs, the dialog contents behave exactly as if they are part of the "dialog" DIV.
That is, whatever div you use for the dialog -- any styling you do on that div, or on the contents of that div, will be reflected in the dialog. Just style the contents as part of the #dialog-message div and forget about the fact that they are in a dialog, and true happiness will be yours.
jsFiddle Demo
Edit:
I just read the comments below your question and I see that Austin Mullins has a solution that should work, and it answers your question about adding a class to the table-within-the-dialog. I hope he will add it as an answer so it can be upvoted.
But yes, it really is that simple. Quiet appreciation for John R
The effectiveness of this approach depends on what exactly is returned by "sample_counts.php". In my testing on JSFiddle, I discovered two different approaches that work in different situations.
If the <table> element is the root of the document, the following works:
function(data) {
$dialog = jQuery('#dialog-message');
$data = $(data);
$data.addClass("msg-table");
$dialog.html($data).dialog('open');
return false;
}
In this test, I had the echo endpoint return the following HTML:
<table>
<tr><th>Usin</th></tr>
<tr><td>Samno</td></tr>
</table>
Notice that, in this case, we expect the table by itself with no surrounding containers. If, on the other hand, the table is part of a larger document, the following works:
function(data) {
$dialog = jQuery('#dialog-message');
$data = $(data).find("table");
$data.addClass("msg-table");
$dialog.html($data).dialog('open');
return false;
}
Note the use of the find() function to get to the first <table> element. Here's the example HTML used to test it:
<div>
<table>
<tr><th>Usin</th></tr>
<tr><td>Samno</td></tr>
</table>
</div>
// Use 'dialogClass' property.
$( ".selector" ).dialog({
dialogClass: "alert"
});
I simply added the following css in the main page
div#dialog-message table {
margin: 1em 0;
border-collapse: collapse;
}
div#dialog-message table td, div#dialog-message table th {
border: 1px solid #eee;
border-color:#CC0033;
padding: .6em 10px;
text-align: left;
}
this solved the problem. No other changes made. Thank you every one who gave suggestions/answers

Need to Hidden text in file input and resize the browser button in IE

In my project I have file input button, for that i need to remove the file text box and need to set some background for browse button.
Kindly give me idea.
Nicely styled file upload
Programmatically trigger a click
CODE
$('img#mytrigger').on('click', function () {
$('#fileupload-example-1').trigger('click');
});
Provide a label for the input field
CODE
<input type="file" id="fileupload-example-4"/>
<label id="fileupload-example-4-label" for="fileupload-example-4">Click me</label>
CSS
#fileupload-example-4 {
height: 0;
width: 0;
}
#fileupload-example-4-label {
border: 1px solid #cccccc;
padding: 5px;
}
jQuery is required for this method. Include the following line in code too.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Ref: link
try this technique..
echo "<div>\n";
echo "<div style=\"width:80px;position:absolute;\">Browse</div >\n";
echo "<input type=\"file\" style=\"width:80px;position:absolute;opacity:0;\" />\n";
echo "</div>\n";

How to switch background-color that is on a PHP input, based on the webpage navigated?

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

Categories