We Keep Coding

JS Summernote Filling Two Elements

I have a piece of code that grabs the value from a summernote input area and places it into another element (#intro_one) within an iframe on my page.
var intro1 = $('#intro-summernote').code();
previewContent.find('#intro_one').html(intro1);
This works fine, however i am also trying to insert the same value within another element.
previewContent.find('#intro_one_mobile').html(intro1);
This one does not work. I have tested populating the "#intro_one_mobile" with dummy data and it inserts correctly, when trying to reuse (insert) the summercode value into more than 1 element, it doesn't work.
Any input here would be great, thanks

SCROLL JAVASCRIPT Skip one image and go to the next?

I am using javascript scroll plugin to scroll full page image horizontally. Now what I want is when I click down arrow it skips the next slide and moves to the third one by just passing by the second one.
How can I do that?

You can use html and improve with simply javascript.
To the button, element, arrow or something that will be clicked, but recommend using a (hyperlink):
Go to text
For the text that will receive focus after clicked
<div id="go-to-text">
your text
</div>
To understand The element A, with the attribute href starting with #, lead to another element with the same id, which need not contain the #.
The element has id # + of another html element
Element that receives focus has the ID referring to the element

Get selection start container when selecting a line and the blank space before it in contentEditable

I have a contenteditable element.
I do not allow any element in the content editable besid an <a> tag and a <br> tag.
I would like to know when a user selects a range and get the start container & end container.
Consider the following content in the editable element:
<div id="div1" contenteditable="true">bla bla <br> <br>bla2 bla2<br>awsome<br>foobar </div>
Heres a Fiddle to help demonstrate this.
When a user selects content the starts after the last character of some line (or better yet, at the beginning of a new empty line) and ends wherever - the range object returned by window.getSelection().getRangeAt(0) states that the start container is the editable element itself , and not the last child node selected.
How can I know the correct start container?
Steps for reproducing:
Open the Fiddle and open web console.
Start selecting text using your mouse from the end of the text (including the last space [&nbps; char]) and release your mouse just before the last space in the first line.
Look at the web console logs: it says the start container is the editable div instead of the text node last chosen (that contains only one char - an )
This also happens when you release your mouse just before the end of the empty line, not selecting its content.

Scroll inside dynamic and invisible div (TINY box) to an element inside

I have a page which loads dynamic content inside a modal popup box called TINY box. The content is generated only when the respective links are clicked. I then have a variable called var innerhtml = "<div id ='"+d.name+"'> which generates divs inside the modal box.
where d.name is a variable that dynamically produces a value based on my data. This div is inside the main modal box div which is generated and destroyed whenever the user opens the link and closes the box.
Infact even the box is generated on-the-fly:
var innerhtml2 = "<div id ='box'>
But WHILE the box is open, I want the box to autoscroll to a particular div (based on the ids I've mentioned above).
I tried ScrollTop, ScrollTo and Scrollintoview - but I haven't had any luck because the modal box is created and destroyed on the fly and I've read around that those functions work only once the page is fully loaded. Is it possible to write a program that can automatically scroll a dynamically generated modal box to dynamically generated divs inside it?
So how can I do this? Do you need code snippets?
Thanks in advance!
Kaushik

Assuming I'm understanding you right, you might be able to use the following jquery code within the function that opens the created box and after the div has been added to DOM:
$('html, body').animate({
scrollTop: $("#"+d.name).offset().top
}, 1000);
This will scroll to the top of the element with the id stored in the variable d.name,

The modal box loads with a time delay and so when the DOM element is finally generated, the code to scroll is already executed and hence the program couldn't recognize the DOM element Using Jquery's triggerHandler and a longer time delay for scroll, my issue go resolved! Also, I think these sort of bugs are what are known Heisenbugs -Why would jquery return 0 for an offsetHeight when firebug says it's 34?

date picker should appear when clicked on image

In fiddle i am displaying a dynamic date picker which displays date when we put curser on that text box, that is fine.i want a image to be placed right side of text box and when image will be clicked then same date picker will be displayed.
http://jsfiddle.net/cBwEK/
I am trying by putting an image there but when i click on that image nothing happens. How can it be done? Any help please

As it turns out, there is an option for this very thing: toggleElements. It expects a collection of other elements that can also invoke the datepicker. I added an array with a single element and it seems to work just fine.
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['imageInvokerP']
});
Fiddle: http://jsfiddle.net/cBwEK/10/

one ans was given by Jonathan and this should be the way of doing things of these kinds.
but therez an easy solution you can take
assuming id of your image is Image and that of text box is Input
you can do everything normally
binding the datepicker to the input element using $('#Input').datePicker() in document.Ready
next you can bind the click event of the $('#Image') like this
$('#Image').click(function(){
$('#Input').click();
});
this way automatically your input element will get focus when you will click on the image.