Displaying and highlighting a particular line in HTML - javascript

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.

Related

How to style text via a javascript function when coming from an input field

I have one input field that facilitates a person having a conversation but playing both roles in the convo. I want to get as close as I can to what its like to have a text conversation, but I cannot seem to sort out how to style the text when it comes through.
As of the moment, the user types the text and hits one of two buttons, each is loaded with the following function to pull the text, create a div, text node, append them and place in the page.
I tried styling the initial input but that simply makes the input field styled, does not affect the actual output.
I tried adding style at each step of the way, to the variable I saved the input in, to the p, the div, the text node, and after placing it in the doc... each time the function failed.
I tried the attribute method and an innerhtml approach.
What would work? At minimum I would love the function to bold and right align the text. Next best would be to append it with the contents of an ng-app so it says Me: (text here), then My future self: (text here)... which I sense would just involve a string set to a variable.. but setting x = {{name}} caused the function to fail..
I know theres a way to use firebug to understand these failures, but I am not quite understanding that yet. Any suggestions?
<script>
function changeTextComment4(destination){
// to be modified from the above to change the location of the dump
// this function ADDS a comment from the comment field to the div w id comment near it...
var userInput = document.getElementById('userInputS1').value;
// get the input from the user
// 3 make the div a panel
var para = document.createElement("P");
// assignment of attributes
var t = document.createTextNode(userInput);
para.appendChild(t);
// add comment area
// place the item
var destination = document.getElementById(destination)
destination.insertBefore(para, destination.firstChild);
document.getElementById('userInputS1').value = "";
document.getElementById('userInputS1').focus();}
</script>
you can add style by referring to the selector
#userInputS1{
color : #F00;
}

Add Span to Label ID

I'm trying to add a span to a label for which I don't have access to the HTML as it's output from RSForms Pro. I would like to add a tooltip span to individual labels so when the person rolls their mouse over, they get some information.
Here is what the code looks like:
<p class="rsformVerticalClear"><input name="form[Services_DM][]" type="checkbox" value="Death Records Retrieval/Search" id="Services_DM0"><label for="Services_DM0">Death Records Retrieval/Search</label></p>
The next option has the class Services_DM1 and so forth.
How do I go about adding a span to "Death Records Retrieval/Search" without having access to the actual code? Is there a way to inject it?
How are you inserting the code into your page? Anything embedded (such as an Iframe) will be barred from being manipulated from (or, IIRC, accessed by) your javascript due to XSS concerns.
Assuming your html and the loaded html are rendered into the same document, you'd want to use the HTML DOM functions to manipulate the html post load. This function should do what you want:
function addToolTip(elementid, content, classname) {
var theelement=document.getElementById(elementid);
var thetooltip=document.createElement('span');
var thetext = document.createTextNode(content);
thetooltip.appendChild(thetext);
thetooltip.setAttribute('class',classname);
theelement.appendChild(thetooltip);
}
To generate a tooltip, just call addToolTip with your label's element, whatever content text you'd like to see within the tooltip, and a css class (I figured you may want this for styling).
You can target all the labels with class starting from "Services_DM" and append a span to them:
try this jQuery sample snippet.
var $span = $('<span>My span contents here </span>');
$('label[class^="Services_DM"]').each(function(index,item){
$(this).append($span);
});
The above code is not tested, for reference purpose only!

How to load different HTML based on window.width()?

How to always listen to window.width() and load different HTML codes based on the width values? I'm using window.width() and replaceWith().
It's only works when I open the page and not working when I resizing my browser window.
My code inside my html file:
var width;
$(window).resize(function() {
width = $(window).width();
if (width < 768) {
$("#the_dropdown").replaceWith("<p>Less than 768</p>");
} else {
$("#the_dropdown").replaceWith("<p> More than 768</p>");
}
});
$(window).trigger('resize');
Demo
Another question, does replaceWith() suitable for situation that involves long HTML codes (more than 1 line)?
I've already done some sets of HTML codes based on specific window's width and I want to put it accordingly inside my #the_dropdown div.
Your code doesn't work because replaceWith() replaces the selected element. In your case, the element with id #the_dropdown. Therefore on the next trigger, this element isn't found and no text is written.
Replace replaceWith() with .html().
Demo

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.

Check/uncheck tree with toggle/slide - few minor coding issues

Whilst this does use some of the code from a question I asked yesterday (Dynamically check / uncheck checkboxes in a tree), I feel that this is a slightly different question as I need to add in clearing divs and also slide data in the tree up and down.
I've taken what I learnt yesterday and added in a slider as per this link - http://jsfiddle.net/3V4hg/ - but now I've added clearing divs the tree is not unchecking all the way to the top if the bottom of the tree has no options selected. If you look at the JSFiddle, if you check A and/or B then uncheck it, the parent and grandparent do not uncheck automatically. Also, for some reason that I haven't figured out yet - the slider decides to slide upon clicking the checkbox in the child area (I've also noticed that the toggle image for the region area to display changes when the continent one toggles - haven't tried to solve that as just noticed when adding to JSFiddle).
I'm also thinking that there may be a better way to code the togglers/sliders (since used by more than one kind of toggle, but I'm unsure).
Fiddle: http://jsfiddle.net/3V4hg/2/
I have applied some modifications to your code. Have a look at the fiddle and comments (at the code, and at the bottom of the answer):
$('#delivery_zones :checkbox').change(function(){
$(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
if(this.checked){
$(this).parentsUntil('#delivery_zones', 'ul').siblings(':checkbox').prop('checked', true);
} else {
$(this).parentsUntil('#delivery_zones', 'ul').each(function() {
var $this = $(this);
var childSelected = $this.find(':checkbox:checked').length;
if(!childSelected){
// Using `prevAll` and `:first` to get the closest previous checkbox
$this.prevAll(':checkbox:first').prop('checked', false);
}
});
}
});
// collapse countries and counties onload
$(".country_wrap").hide();
$(".county_wrap").hide();
// Merged two click handlers
$("#delivery_zones").click(function(event){
var root = event.target; // Get the target of the element
if($.nodeName(root, 'input')) return; // Ignore input
else if(!$.nodeName(root, 'li')) {
root = $(root).parents('li').eq(0); // Get closest <li>
}
// Define references to <img>
var img = $('.toggle img', root).eq(0);
// Define reference to one of the wrap elements *
var c_wrap = $('.country_wrap, .county_wrap', root).eq(0);
if(img.attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
img.attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
c_wrap.slideUp("slow");
} else {
img.attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
c_wrap.slideDown("slow");
}
});
* I have defined the root to be a <li> element. The first occurrence of the .count(r)y_wrap element should be selected, which is achieved using .eq(0).
Your previous code contained some logical errors, which I have also fixed: $('.toggle img', this) selects every <img> element which is a child of .toggle, which caused the arrows at the end of the tree to toggle too. My solution using event.target is more neater, and allows your example to be extended to even deeper trees.

Categories