Develop Reference

jquery multiple links text replacement from id in target href page

I'm experimenting with jquery, and thought it would be comfortable to have my links get their content from their source. I'm not really sure it's possible though.
<a href="page1.html" >pagetitle</a>
<a href="page2.html" >pagetitle</a>
What I want to achieve is replace "pagetitle" with text from #title id, ex : "My page 1" from target, for every link, on pageload.
Source element in the pages :
<h1 id="title">My page 1</h1>
Desired output :
<a href="page1.html" >My page 1</a>
<a href="page2.html" >My page 2</a>
I tried various solutions but I can't achieve the desired behavior.
If impossible with jquery, telling me will also help ! Thanks for your time.
Edit : I tried some basic lines as follow :
This works, but of course with only one page so obviously every title is the same.
$( 'a' ).load( 'page1.html .title' ).text();
These won't work, maybe I'm a bit clumsy !
$( 'a' ).load( 'a.attr("href") .title' ).text();
var distantcontent = $('a.attr("href")');
$( 'a' ).load( 'distantcontent .title' ).text();

Try this... It works with the test pages I made.
See comments in code.
$(document).ready(function(){
// Get all the href (If there is!)
var hrefArray = [];
$("a").each(function(){
if( $(this).attr("href") !="#" && $(this).attr("href") != "undefined" ){
hrefArray.push( $(this).attr("href") );
}
});
var i = 0;
function getTitles(href, i){
$.ajax({
url: href,
success: function(response){
// Stringify the result
var responseString = response.toString();
// Get the index of the title tag
var titleTagIndex = responseString.indexOf("<title>");
// If the title tag IS found
if(titleTagIndex != -1){
// Find the index of the title closing tag
var titleClosingTagIndex = responseString.indexOf("</title>");
// Get the sub-string between the two indexes we found.
title = responseString.substr(titleTagIndex+7,titleClosingTagIndex-(titleTagIndex+7));
console.log("Title found: "+title);
// Replace the link text.
$("a").eq(i).text(title);
}
// Get the next title
i++;
if(i<hrefArray.length){
getTitles(hrefArray[i], i);
}
},
error: function(request, status, error){
console.log(error);
}
})
}
// Get the first title
getTitles(hrefArray[i], i);
});
Now, the titles are requested one by one using ajax.
You WILL notice the delay for it to populate the titles on load.
If you also have external links on your page, instead of $("a"), use a class to target your "same domain" links... Because the ajax wil fail on external links and just stop the looping.

You need to iterate through the individual elements. Something like this:
$('a').each(function() {
u = $(this).attr('href');
console.log('$(this).load(' + u + ' .title)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My page 1
My page 2

Changing jQuery marquee text and css/style

I have div
<div id="rotatingText" class="marquee">
</div>
and marquee on that div is initialized on window load
jQuery('.marquee').marquee({
duration: 3000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: false
});
Now i need to change text and css of that div on ajax aftersuccess. I get new text and css properties in that ajax response. With that text and css I invoke following:
function setRotatingTextProperties( value, css, objectId )
{
var object = document.getElementById( objectId );
object.innerHTML = value;
jQuery ( object ).attr( 'style', css );
}
After that marquee stops working.
I think that jQuery marquee sets some style in that div and i override it with:
jQuery ( object ).attr( 'style', css );
if I just add my css to existing with
var currentCss = jQuery ( object ).attr( 'style');
jQuery ( object ).attr( 'style', currentCss + css );
with multiple changes I will end up with huge amount of unusable css. And that css will change regularly ( every fiew seconds )...
Any advice and idea will be much appreciated.
Thx in advance.

Actually I think that your problem is not in your css and:
jQuery ( object ).attr( 'style', css );
In my experience problem with jQuery marquee is in changing of text. so your problem is:
object.innerHTML = value;
Best solution ( If you can change html of that page ) is to add span into it:
<div id="rotatingText" class="marquee">
<span id="rotatingTextSpan"></span>
</div>
And change span text, and style of the div. something like:
function setRotatingTextProperties( value, css )
{
// change span text value
$( '#predefineImageRotatingTextSpan' ).text( value );
// change css value on div
$( '#predefineImageRotatingText' ).attr( 'style', css );
}
If you can't change HTML of that page for any reason you can always insert span value into it on window.load or document.ready, but BEFORE you initialize marquee with something like
$( '#predefineImageRotatingTextSpan' ).html( '<span id="predefineImageRotatingTextSpan"></span>' );
and then use above function.
EDIT:
If you have some predefined text in your div at the beginning just copy its value into that div:
var $object = $( '#predefineImageRotatingTextSpan' )
var initialText = $object.text()
$object.html( '<span id="predefineImageRotatingTextSpan"> ' + initialText + '</span>' );

Use find data attribute to add class

I am attempting to create a menu with unique data attributes attached to each navigation item. On click I want that navigation item to find the section with the same attribute and add a class to it. This is the code I am using thus-far (it is part of a much larger script).
var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
$navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
$el.addClass( 'bl-expand-item' );
$navItems.find("[data-section='" + current + "']");
$sections.find("[data-section='" + $navItems + "']").addClass( 'expand expand-top' );
} );
This is the script it based off of. http://tympanus.net/Development/FullscreenLayoutPageTransitions/
The idea is to add a separate floating navigation to link to the different sections (instead of the direct click to expand that is current implemented). The current script I added only seems to refresh the page on click. I couldn't get it to work in a fiddle at all so the original script im sure will work. The section pasted about I have added in on my local files.

On the first line, when you try to call for a <section> element, you are missing the jQuery shorthand before the parentheses. That should fix your script.
So it should look like:
var $section = $('section');
That should have you all set to continue!

First off you are missing your $ in the first variable assignment. var $section = $('section')
After that it is difficult to tell what you're trying to do without seeing your markup, but I'll take a stab at it.
It appears that you are trying to filter the $section object by the data-section attribute of the nav > a element. This code should do just that:
var $section = $( 'section' ), $navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
var $navSection = $section.filter("[data-section='" + $( this ).data( 'section' ) + "']");
$navSection.addClass( 'expand expand-top' );
return false;
} );
Notice that we are filtering all of the sections by the value of the clicked anchor's data-section attribute.
If that doesn't help, add your markup so we can see your structure.

Recommended method of adding/storing/constructing HTML controls dynamically

Is there a recommended method of dynamically adding/storying/constructing HTML controls to dynamically added elements on a HTML page?
Basically, I have a widget based system I'm working on, where the user chooses the widgets s/he wants to have displayed. S/He can have as many or as little widgets on the screen as required, and they can also have the same widget many times displayed at once.
The script for that looks something like this:
success: function( widget_shell )
{
if( widget_shell.d[0] ) {
$(".column").empty();
var i = 0;
for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {
var $widget = $("<div class='widget widget_" + widget_shell.d[i].widget_id + "'>").appendTo( $(".column_" + widget_shell.d[i].column_id) );
$("<div class='widget_header widget_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_sub_header widget_sub_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_content widget_content_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_footer widget_footer_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
}
each .widget will need controls such as buttons, textboxes etc in the .widget_sub_header section. What is recommended way of doing that? "That" as in, how to get further HTML controls into the .widget_sub_header. Add the HTML for the controls in the database? Somehow connect to an external file containing the HTML controls and add them in? or some other method?
I guess my 2 main concerns are:
Easy maintenance
Server resource friendly

jquery-ZenCoding is easy way to create some nested html elements :
https://github.com/zodoz/jquery-ZenCoding
exemple :
$.zen("div#widget>ul.instrument>(li{piano}+li{guitare}+li{flute})");

What about something like this? I suggest instead of adding a class with the id, add an actual id on the parent, that's all you need to target children elements.
function createWidget( id ) {
var widget = [
'<div class="widget">',
'<div class="widget_header"></div>',
'<div class="widget_sub_header"></div>',
'<div class="widget_content"></div>',
'<div class="widget_footer"></div>',
'</div>'
].join('');
return $( widget ).attr( 'id', 'widget_'+ id );
}
$.each( widget_shell.d, function( i,v ) {
$('.column_'+ v.column_id)
.append( createWidget( v.widget_id ) );
});

I'd add a small template engine. There is a very simple one made by John Resig that I use frequently at:
John Resig micro-templating
Chances are you'll be doing this sort off thing again so a template engine is pretty handy to have lying around.
If you don't like that one you can have a look at a great resource of micro-templates at:
Microjs templates

I've used to work on a similar widget system.
This is how I've managed it :
Have a hidden div container that holds all the template elements.
<div id='widget-templates'>
<div class='widget1-id' >
<input type='text' class='ytSearch'/>
<button id='btnYtSearch'>Search</button>
</div>
<div class='widget2-id'></div>
...
<!-- etc etc -->
...
</div>
I used an object called widgetFactory which holds all the javascript code needed to create a widget from the template.
var widgetFactory = {
youtubeSearch: function(data){
var $generatedWidget = $('#widget-templates > .widget1-id').clone();
// prepopulate with some data if requested (usually when binding data to an already existing widget)
// ...
// attach events
// ...
return $generatedWidget;
}
}
Then with external javascript logic, I would save just the widget data (as JSON) and widget type into the database.
tbl_widgets(id, name, type)
tbl_user_widget(user_id, widget_id, data)
Note that this is just from my memory and there probably is a much more profound solution, but i hope it could shine any new idea on your user customizing widget system.

How could I make it such that javascript in an external file works only on an image in a div inside a PHP file?

I'm pretty new to web development, and am learning as I go along.
I have a PHP file (index.php) with code similar to that below (divs are defined in styles.css):
<div class='imgBox' id='imgBox'>
<form name='graphForm' id='graphForm' method='post' action='/'>
<input type='image' id='clicked' src='" . WebPath. "/images/graph.png' class='clickableImage' />
<input name='x_y' id='x_y' type='hidden'/>
<input name='p_id' id='p_id' type='hidden' value='".$RecordID."'/>
</form>
</div>
I've an external js file (showCoords.js) with the following code:
var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];
$( 'clickableImage' ).
each(function () {
var pos = $( this ).position(),
top = pos.top,
left = pos.left,
width = $( this ).width(),
height = $( this ).height();
$( this ).
mousemove(function ( e ) {
var x = some_code_here,
y = some_code_here;
$( tooltip ).text( x + ', ' + y ).css({
left: some_code_here,
top: some_code_here
}).show();
}).
mouseleave(function () {
//somestuff;
});
});
I currently have it such that I placed the showCoords.js file in the header file (header.html):
<script type='text/javascript' src="http://blahblah.org/files/showCoords.js"></script>
My understanding is that I felt that this particular js should be loaded after the web page itself is loaded, and will then run automatically on the image in that div. Is this wrong?
Nothing is happening when I load the page, so I'd appreciate any help.
EDIT: In Firebug, I get a "ReferenceError: showCoords is not defined" error. Does this mean that showCoords.js is not even being included in the first place?

You need to wait until the document is ready before you fire all that code, we call it domready or documentready in javascript.
To do this in jQuery use this:
$(function() {
// insert all your code here
});
You also are trying to select an element called clickable image. You probably want to find a class as #oxo has mentioned.
$('.clickableimage') would select <img class="clickabelimage" src="..." />

Your jQuery selector is wrong. Try using $( '.clickableImage' ) and start your debugging from there.

If you are using jQuery, you are using the wrong way of selector.
$( '<div id="tooltip">' ) should be $('#tooltip')
$( 'clickableImage' ) should be $('.clickableImage')