increment number displayed in a div after click - javascript

i am trying to create a rating system. The idea is on page load I would see how many stars each star has. And when I click on the a star it increases the width of the bar. Here is what I am doing. The problems so far are 1: the bars are not displaying correctly 2: the numbers of stars are not incremental correctly. The idea is to update the bar after a new click. Here is the fiddle. I have few other questions associated with this. I will do a new post once I solve this one
http://jsfiddle.net/sghoush1/VU3LP/37/
the Jquery looks like this
$(function(){
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
var curr_val = $('.reading').html();
var new_val = parseInt(curr_val)+1;
if(curr_val< 20){
$('.barActive').css('height', '20px').css('width', '20px');
}
if(curr_val< 40){
$('.barActive').css('height', '20px').css('width', '40px');
}
$('.star').click(function(){
$('.reading').eq($(this).index('.star')).html(new_val);
$(this).addClass('active');
$('.bar').eq($(this).index('.star')).addClass('barActive');
});
});

As far as problem #2 goes: you need to read curr_val and compute new_val inside the click response function. As it is, you read the first one and use that for all star bars.
As far as problem #1 goes: I have no answer; you say that the bars don't display correctly, but you don't say what behavior you want. However, I suspect that this problem will also go away if you move the css assignments into the click function as well (using new_val instead of curr_val for the bar). You would still need to initialize each bar using its specific value and index.

Related

Change multiple div contents on another div mouse hover without css/with an xml source file

I'm working on this site, and I need to change the contents of image_preview, title_preview, description_preview, link_preview according to what I'm hovering over (ex: mouse hover "button_a" = image1.png, iliketitle, ulikedesc, welikelink).
I've tried using css solutions like this and this, but I wasn't able to make them work like I needed.
Since the page will have many button_#'s (50-100 buttons), I think css isn't a proper choice.
So what I'm looking for is a way to do this without css, better if with an xml source file, so it'd be easier to manage the content to display for each button. I only found this talking about the xml I'd need, but I'm not sure that's exactly what I need.
Your buttons have a class (e.g. .btn) and the associated data to each button is store somewhere, let's say each button has a data-* attribute which points to the right data.
$('.btn').hover(function() {
var data = $(this).data('something');
if(data == "b1") {
//assign the values related to b1
}
else if(data == "b2") {
//assign the values related to b2
}
//and so on
}
If you have a lot of buttons like that, then the data can be a reference to an array containing the proper info.
Here's a jsfiddle DEMO.
And here's updated DEMO.
EDIT:
.hover() can take two handler which the second will handle when mouse is out of the element.
yourElement.hover(
function() {
//mouse is on the element, do stuff
},
function() {
//mouse is out, do other stuff
}
);
You can have a function to set the default values and call that in hover's second function.
jsfiddle DEMO

Read more opens 1st one all the time

I've a page with about 10 short articles.
Each of them as a "Read More" button which when pressed displays hidden text
The issues I have at the moment is when I press the "Read More" on any of the 10 button it shows the 1st articles hidden content and not the selected one.
I think I need to set a unique ID to each article.. and the read more button be linked to it.. But I don't know how to set it.
I looked at this but couldn't get it working how to give a div tag a unique id using javascript
var WidgetContentHideDisplay = {
init:function() {
if ($('#content-display-hide').size() == 0) return;
$('.triggerable').click(function(e){
var element_id = $(this).attr('rel');
var element = $('#'+element_id);
element.toggle();
if (element.is(':visible')) {
$('.readmore').hide();
} else {
$('.readmore').show();
}
return false;
});
}
}
var div = documentElemnt("div");
div.id = "div_" + new Date().gettime().toString;
$(document).ready(function(){ WidgetContentHideDisplay.init(); });
OP Edit: Sorry, the original code wasn't in caps. I kept getting errors when trying to post, so I copied the code into Dreamweaver and it made it all caps for some reason.
Instead of selecting the element to toggle with an ID (i.e. $('#'+ELEMENT_ID)) you could setup a class for your item and use the class selection (e.g. $('.DETAILED-ARTICLE)') to select the child (or the brother, etc. depending how you built the HTML page).
In theory each ID should point to a single element but each class can be put to as many elements as you want.
If you're getting errors, read the errors and see what they are. Off of a quick read of your code, here are a couple things I noticed that will probably cause issues:
"documentElemnt" is misspelled, which will render it useless. Also, documentElement is a read-only property, not a function like you're using it.
toString is a function, not a property, without the parentheses (.toString()) it isn't going to function like you want it to.
Run the code, look at the errors in the console, and fix them. That's where you start.

Displaying and highlighting a particular line in HTML

I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.
You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.
There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.

Tracking changes in web application

I have an application in which the user needs to see the changes that have been made during the latest edit.
By changes I mean, the changes made in all inputs like a textarea, dropdowns.
I am trying to implement this by showing a background image on the right top and then when the user clicks this background image, a popup is shown which shows the difference.
I am using prototype 1.7.0.
My First question would be:-
1. What would be the best approach to implement this functionality?
2. Can I put a onClick on the background image?
There some functions in the jQuery library that I believe would be helpful to you. If you are using prototype, I would guess that there is some similar functionality you may utilize.
I would suggest writing some code like this:
var $input = $('input').add('textarea').add('select');
$input.each(function() {
var id = $(this).attr('id');
var value = $(this).val();
var hiddenId = 'hidden' + id;
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId);
$(this).after(newHiddenInput);
});
The above code will create a new hidden input for each input, textarea, and select on your page. It will have the same value as the input it duplicates. It will have an id equivalent to prepending the id with the word 'hidden'.
I don't know if you can attach a click handler to a background image. If your inputs are enclosed inside a <div>, you may be able to get the result you want by attaching the click handler to your div.
In any case, you should now have the old values where you can easily compare them to the user's input so that you can prepare a summary of the difference.
Prototype gives us the Hash class which is almost perfect for this but lacks a way of calculating the difference with another hash, so let's add that...
Hash.prototype.difference = function(hash)
{
var result = this.clone();
hash.each(function(pair) {
if (result.get(pair.key) === undefined)
// exists in hash but not in this
result.set(pair.key, pair.value);
else if (result.get(pair.key) == pair.value)
// no difference so remove from result
result.unset(pair.key);
// else exists in this but not in hash
});
return result;
};
This is no way to tell if an element was clicked on just it's background image - you can find out the coordinates where it was clicked but that is not foolproof, especially since CSS3 adds complications like multiple backgrounds and transitions. It is better to have an absolutely positioned element to act as a button.
$('button-element').observe('click', function() {
var form_values = $H($('form-id').serialize(true));
if (old_values) {
var differences = old_values.difference(form_values);
if (differences.size()) {
showDiffPopup(differences);
}
}
window.old_values = form_values;
});
// preset current values in advance
window.old_values = $H($('form-id').serialize(true));
All that remains is to implement showDiffPopup to show the calculated differences.

Microsoft styled tabs

Recently I asked a question on stackoverflow about multiline tabs. Below is the link
multi-line tabs
I was just wondering if its possible to make them like windows styled tabs, that is if a tab in first line is selected, I want to push it to the second line. The problem I have is I am creating dynamic tabs. Is it possible using Javascript/jquery, to calculate the widths of each tab and determine at which point a second line of tabs would be started?
Thanks
UPDATED added Tab Auto-Resize.
Tested on Chrome / FF
DEMO & SOURCE: http://ask.altervista.org/demo/microsoft-styled-tabs/
$(function() {
setLines();
$('#windows-properties li a').click(function(e) {
e.preventDefault();
var $li = $(this).parent();
$(this.hash).show().siblings('.property-content').hide();
var liTp = parseInt($li.position().top);
if (liTp < lastLiPos) {
$('li.line-' + liTp).wrapAll('<div id="move-lis"></div>');
$('#move-lis').insertAfter('#windows-properties li:last');
$('li.line-' + liTp).unwrap();
setLines();
}
$li.addClass('selected').siblings('li').removeClass('selected');
});
var $lstLi = $('#windows-properties li:last');
var lastLiPos = parseInt($lstLi.addClass('selected').position().top);
$('.property-content:last').show();
});
//.... other part of code in the demo source ...
I don't know how windows does it, but i don't think this will be possible with dynamic tabs. Instead you can create two lists instead of one. Or better still you can use script to make two lists from one, so that both the lists span the entire line width & you don't have to hard code anything.

Categories