jquery manipulation post page load - javascript

I'm currently using a script on an ecommerce website that shows or hide a free shipping stamp based on a number(price). Initially the stamp shows for all products and i hide it where necessary. My problem is, the script reads from the 'regular price' and will display the stamp accordingly, but i have products with promotions that hides the regular price and displays the promo price then bringing the actual price of the product under the appropriate limit and i can't figure out a way to hide the free shipping stamp on those particular items.
I'm using the following to remove the tag if the price goes under 99, but with my hackish promotion price display, i cant figure out how to read that post load promo price display to apply the function as needed. I've tried replicating this script and applying it to the promo price div to no avail. Any suggestions as to how i can read a divs numerical contents post load and hide the stamp? I'm beginner to intermediate when it comes to jquery so help in layman's terms would be helpful.
$('#results-table .redprice, #pp-wrap #big-price span').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 50){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over50');}
if(number > 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over99');}
if(number < 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('under99').removeClass('freeshipping');}
});
Thank you.

A good idea would be to use html attribute for the real price.
something like
<span realP=12>16</span>
and then getting the number would be easier:
var number = $(this).attr("realP");
goog luck

Related

Kendo grid dynamic edit

i'm using kendo ui for html5 web app. and i need to edit only one column (i.e., Unit) and when it is changed, the Amount column should update automatically. for example:
1 unit = $10,
if i change 1 unit to 5, then amount changes to $50.
How can i achieve this.
Previously I posted a part of my code. now i have done a telerik dojo example.
please take a look here
Working Example with Source code
Update #1:
The demo looks clumsy, i'm sorry for that. click the button with number in first page, then click the cart icon on the top right corner.
This image explains what i want to do with that cart page
How can i do that?
Update #2:
Thanks to #RobertoDeLaParra
For his solution, i came closer completing. but i have a new issue.
When i change the Unit, the aggregate and the Amount field in edit box, doesn't change.
Please take a look at this dojo,
http://dojo.telerik.com/#varanjith/ePOrA/5
Thank you.
Hi change your amount field for this:
{
field: "Amount",
title: "Amount",
footerTemplate: "<div class='ra'>#= sum # </div>",
template: "<div class='ra'>#= Amount * Unit # </div>"
}
and after initializing the cartGrid add this:
var cartGrid = $("#CartGrid").data("kendoGrid");
cartGrid.bind("edit", function (e){
//console.log(e.model);
var unitPrice = e.model.UnitPrice;
var unit = e.model.Unit;
//This code replace the input generated by kendo with our custom HTML
$("td[data-container-for='Amount']").html(unitPrice*unit);
});

Scrollbar is remaining the largest height after updating list contents

i want to design a webpage that is to show about 700 rows from Database.
webpage is : http://www.shefacenter.ir/fa/disease
Data to show is: [Subject] & [Comment]
i get data from DB and show them simply in Unordered List (ul).
the code is like:
<div class="box_list_container">
<ul id='list_ngm' class='list_1column' >
<li><span>Subject</span><p class="list_comment">Comment</p></li>
<li><span>Subject</span><p class="list_comment">Comment</p></li>
<li><span>Subject</span><p class="list_comment">Comment</p></li>
...
<li><span>Subject</span><p class="list_comment">Comment</p></li>
</ul>
</div>
after that, i ADD some simple jQuery code to Switch Showing this List as 3 different Classes:
[Show Results in 1 Column List]
[Show Results in 2 Column List]
[Show just Subjects of Results]
< this 3 mode has 3 different CSS class that they works fine. >
NOW, My Problem Starts over here:
when i switch showing results between that 3 modes, the Browser Scrollbar has Remains the Largest Height of List after switching.
Notice:
i have use "replaceWith" FROM "jquery-2.0.3.min.js" to change current Class of for have a [1 column],[2 column] or [just subjects] show!
Any idea is appreciated.
i tried more and more to find the right way to solve that bad problem.
and finally i found that.
the tags, should have a "display:none" property at first. and after page loaded, with jQuery i change them to "display:block" .
thats it!

Manipulating a Form's data in Google Sheets

I'm using Google Drive/Sheets to host my personal film ratings list, and I thought it'd be a lot easier than this.
I've set up a form which asks about the film and what rating I give it (out of 4 categories), and then it puts this into a sheet. The data is inputting fine, but I want the sheet to automatically find out the average of my 4 individual ratings, and then add an overall rating to that row of data.
What I can work out...
What I would like...
I'm assuming it requires some kind of trigger from the form submission which then performs some javascript and inputs a new piece of data in the appropriate column and row, but I just want work it out. Any help appreciated.
Navigate in top menu to Tools->Script editor in Summary spreadsheet
Place this code inside
function setAvarage() {
var summaryCloumn = 10 //row J
var sheet = SpreadsheetApp.getActiveSheet();
var lastRow = sheet.getLastRow();
sheet.getRange(lastRow, summaryCloumn).setFormula("SUM(E"+lastRow+":H"+lastRow+")/4");
};
Now setup the trigger in very same script editor Materials->Triggers (first option - unfortunately I do not have docs in english so name can be slightly different..)
Choose add trigger
"setAvarage", "From table", "on change"
just tested and worked...

conditional change of quantity text box using jquery?

I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.
The crucial part for kit products is:
if (parseInt($("#kitProduct #Quantity").val()) < 25) {
$("#kitProduct #Quantity").attr("value", "25");
It knows its a kit product because i have a div.id wrapped around the page called Kit Product.
My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:
<div class="ProductNameText">Exclusive Handmade Box</div>
If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.
I have tried the following code:
quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
if(quantity)
{
$("#kitProduct #Quantity").attr("value", quantity);
$("#kitProduct #Quantity").keypress(function(){
var quantity = parseInt($.trim($(this).val()));
if( quantity < 1) {
$(this).val('1');
} else {
$(this).val(quantity);
}
But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.
Really hope you can help?
More infomation:
For the most part Kit products are defined in an xml package which is applyed to a kit product in the admin section. However i have a few products which are still products but dont require 25 to be put into the quantity.
At the moment the jquery checks for a text area box because if the user adds a personalisation into that it means they are wanting a kit product therefore min quantity is 25.
But i have a product i want to check based on its div contents that i want to have as 1 or more...
so i should be able to enter 1-25 into the box without my current code saying oppps you entered less than 24 so im going to change it back to the min kit product quantity..
if you try the jsfiddle you can see that it wont let you put in a value of say 3? thats the problem.
http://jsfiddle.net/FB5MQ/3/
You should just have a variable minimum in the "crucial part for kit products" code:
var minValue = 25;
if ($('div.ProductNameText').text().match(/Exclusive Handmade Box/)) {
minValue = 1;
}
if (parseInt($("#kitProduct #Quantity").val(), 10) < minValue) {
$("#kitProduct #Quantity").prop("value", minValue);
// rest of code...

how to add a color to a line in sharepoint 2007 list that has a specific text?

I would like to know how to add a color to a line in sharepoint 2007 list
if in one field there is a specific text contained ?
for example :
I have a list that have three fields:
list1
1.id
2.name
3.full description
now i want to show only the first and the second field to the user.
list1
id name
1 abc
2 edv
second thing, i want to give a color (let say red) to a row that contains in the hidden
field - "full description", a text with the word for example 'color'.
I found a javascript code that i can add to the aspx page :
(document).ready(function(){
$Text = $("td .ms-vb2:contains('color')");
$Text.parent().css("background-color", "red");
});
but it's only works if the the "full description" is shown.
can someone give me an idea ?
thanks,
gadym
Have you considered creating a data view with conditional formatting? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
That way you won't have to do this ugly javascript hacking :)
One idea could be to use a calculated column to search the other field for the prescence of your text string - then base the jQuery logic on that calcualted column.
However you mention a description field which is probably defined as "Multiple lines of Text" and these can't be used in calculated columns.
How about outputting the Description field but then using some jQuery to hide it from view with .hide()?
I can't give you the exact javascript to do this right now but if you need any inspiration then Christophe's blog is a great place to start.
From your question I understood that you could highlighted the row which comes a particular text (color) , but couldn't hide that column. In the blow code I have hided that column. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, is this helps you?

Categories