We Keep Coding

How to get the value of h1 tag using JS?

I have 3 pages, the 2 pages are WordPress pages and the other 1 is a custom page template with a form. The 2 pages are created using wp-job manager plugin. The 1st page has had a dropdown menu and contains list of jobs. On the 2nd page is the description of a job.
Now, I want to get the value of h1 tag on the 2nd page after the user click the input button and pass it to the 3rd page and displayed it in one of the input textbox (Position input textbox) using JS.
How to do this?
Here's the link of the 2nd page
3rd page
HTML:
<header class="entry-header">
<h1 class="entry-title">Collections Trainer</h1>
</header>

Vanilla JavaScript solution (no framework required):
var h1Text = document.querySelector(".entry-title").textContent;

can you use jquery? if so, get the h1 values when you click the button from jquery and then sent to the other page using query string.
EDITED
Add the jquery file in your page to user jquery features. And you need to put the function inside $(document).ready() function in order to attach the function into the object.
you can learn more about jquery in https://learn.jquery.com/.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"/>
<script>
$(document).ready(function(){
$('.application_button').click(function(){
var headervalue = $(".entry-title").text();
window.location = "http://homecredit.ph/testEnvironment/4537-2/?position="+headervalue;
});
});
</script>

Use the class you've given the heading in normal js use the following.
var x = document.getElementsByClassName('entry-title').value;
console.log(x); //outputs collections trainer
If you're using jQuery then its
$('.entry-title').text
Hope that helps.

If you want to get the h1 value only after the button click you will need to put the onclick for the button.
$.(document).ready(function(){
var header1Text ='';
$('.application_button').onclick(function(){
header1Text = $('h1').html();
});
//To display it in whichever textbox you want:
$('#GivesomeIDtoYourTextBox').val(header1Text);
});
PS:You need to also include the jquery source to your page.

jQuery: To get H1 value
var gValue=jQuery("header h1.entry-title").text();
alert(gValue);
As you need to fetch values on other pages, for that you can send values via QueryString or using HTML5 LocalStorage
Sample Code:
var first_page_h1_Value=jQuery("header h1.entry-title").text();
var second_page_h1_Value=jQuery("header h1.entry-title").text();
localStorage.setItem("FirstPage", first_page_h1_Value);
localStorage.setItem("SecondPage", second_page_h1_Value);
On third Page you can get both pages header text
alert(localStorage.FirstPage);
alert(localStorage.SecondPage);

If you are using Jquery then i would recommend that you give id to your H1 tag assuming id of your H1 tag is "h1Title".
HTML:
<h1 id="h1Title">Heading here</h1>
Then to get the title you write following in JQuery:
var title = $("#h1Title").text();
//To Check Whether you are getting text or not
console.log("title :"+title);
By this you will get text of your heading.

How to add an extra classname on iframe, generated by DFP?

I have a DFP creative template that needs to work both on old and new site.
So on the new site (which has its own advertisement component js), I'd like to add a classname "redesign" on the DFP iframe. How do I do it properly?
In conclusion, I'd like to have same creative template on DFP with extra classname for new site.

DFP uses friendly iframes. In your creative template code, you can find this parent iframe and apply a classname if you want.
In the following example, I am rendering my creative template in a div called "mast_head". So the "mast_head"'s first child will be DFP's iframe.
Now in my creative template I can access this masthead element and apply a style attribute as follows:
parent.document.getElementById("mast_head").setAttribute("style","height:400px");
Does this make sense?

Solved it by using the plugin => https://github.com/mcountis/dfp-events
So on redesign ad.js component, I add a new classname "redesign".
window.googletag.cmd.push(function() {
window.googletag.on('gpt-slot_rendered', function(e,level,message,service,slot) {
var slotId = slot.getSlotId();
var $slot = $('#' + slotId.getDomId());
// DFP adds two iframes, one for calling scripts and one for displaying the ad. we want the one that is not hidden
if ($slot.find('iframe:not([id*=hidden])')
.map(function() { return this.contentWindow.document; })
.find('body')
.children().length > 0
) {
$slot.find('iframe').contents().find('body').addClass('redesign');
}
});
});

How would I make a self-linking <div>?

After much Googling, I resort to the chance at ridicule and moderation on Stack Exchange.
What I am trying to do sounds simple enough. I want to make a <div> id/class that will link automatically create a link to itself via some kind of scripting.
Let me put down some pseudocode, before I make it sound more complicated than it is:
#Let div.link = xxx.html
#Let div.pic = xxx.png/jpg
for div in HTMLdocument:
if div.class == "autolink":
div = "<img src=\"mysite/" + div.pic + ">"
Now, obviously that's Python pseudocode, but I am familiar(ish) with PHP and Javascript. Basically, I want to make the div generate an HTML link without having to actually type out the tags and links for every given div on a web page. I want to be able to type, in my index.html:
<html>
<head></head>
<body>
<div class = "1"></div>
<div class = "2"></div>
</body>
</html>
and then to be presented with a page that has the two divs linked, imaged, and, preferably, formatted.
Like I said, the problem seems simple, but I can't seem to get it to work right, in any language. This seems like a thing that would be very useful for begiiner web designers.
PERSONAL NOTE:
I would preferably like to see a solution in PHP or Javascript, but if you are good with Django and want to show me how to get it done in that, I would be just as grateful!
=========================================
EXAMPLE:
Let's say you have a browser based RPG, and you want to show your player's inventory. The Inventory page would display the items in a players inventory, complete with a link and image, based on whatever was in that user's inventory page. It would look like this (this is VERY rough output, Statements tagged in #these# are not code, and should be interpereted as what they describe):
<h1>User's Inventory:</h1>
<p><div class = "item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "item_2">#Link to page of 'item_2', image of 'item_2'#</div></p>
The above would display, roughly, a header that said "User's Inventory", and then display a linked image of item_1, followed by a newline and then a linked image of item_2, where said items would be in a separate file OR a list that lists all the items and their respective links and images.

You can use jquery, and when page dom is loaded, you cycle through each div that has the class autolink and do your manipulations (add your desired html into each div). You can use the id of each div to place data inside. You can use a prefix to that id values for different types of data. For example, im using "inventory_" as a prefix.
<h1>User's Inventory:</h1>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_2', image of 'item_2'#</div></p>
then jquery on document ready:
<script type="text/javascript">
$(document).ready(function ()
{
// define your website here
var mysite = "http://www.example.com/";
// this will cycle through each div with class autolink. using `this` to reffer to each.
$(".autolink").each(function () {
// we get for div with id="inventory_item_1" ...
var mylink = $(this).attr('id').replace("inventory_",""); // ... a value item_1
var myimagesrc = $(this).attr('id').replace("inventory_","image_"); // ... image_item_1
$(this).html('<img src="'+mysite+'images/'+myimagesrc+'.jpg">');
// the above will add html code of this format:
// <img src="http://www.example.com/images/image_item_1.jpg">
});
});
</script>
try it here:
http://jsfiddle.net/5APhT/2/

I'll give a sample in php. Here is an example if you already have a set of links to use
<?php
//Create a multidimensional array to store all you need to create links
$links['1'][]="http://www.yahoo.com";
$links['1'][]="yahoo.com";
$links['2'][]="http://www.facebook.com";
$links['2'][]="yahoo.com";
$links['3'][]="http://www.google.com";
$links['3'][]="yahoo.com";
foreach($links as $class => $innerArray){
$link=innerArray[0];
$linktext=innerArray[1];
echo "<div class='$class'><a href='$link'>$linktext</a></div>";
}
?>
This creates the divs for you so you don't have to add them in advance.
You can add images in the same manner

Simple jquery modal plugin, how to handle html content

Basically, i'm building a basic jquery modal plugin as practice, and as much as the many varieties out in the wild have been helpful for reference, I wasn't sure about the best method for pushing html into the modal that is being built in my jQuery.
This code is building my popups:
var container = $('<div class="container"></div>');
var header = $('<div class="modal"><div class="modal-header"></div></div>');
var content = $('<div class="modal-body"></div>');
var footer = $('<div class="modal-footer"><a class="secondary" href="#">Cancel</a><span id = "button-secondary-label">or</span><span class="green_btn"></span></div>');
$(".popup").append(container);
$(".container").append(header);
$(".modal").append(content);
$(".modal").append(footer);
In an html file that is calling the javascript file with the above code, I would like to pass html to modal-body. I know I could just write the following:
$(".modal-body").html("html goes here")
but I would like to make the plugin handle as much as possible, so what would be the best way to do the following:
in example.html:
...
<script type="text/javascript">
$(.popup).modal();
</script>
</head>
<body>
<div class="popup"><div class="body-text">I want this text in the .modal-body</div></div>
in the js file:
I would like to take the html that is in .body-text and move it into the .modal-body class, or something that will get me similar results.
Again, trying to accomplish this in the external js file, and not in example.html

It's common to use IDs (as it can be set as the href and can be used to point to the given content of a link) instead when trying to target DOm element from modal boxes. So you could do
Some content to be in the modal
Then just grab it and append it to the cmodal
$('#boo').appendTo(content);
You can also have an option so that it can be clone and left the original copy behind
$('#boo').clone().appendTo(content);
You can technically handle classes as well but after depends how your plugin is built. As you can grab all and generate a single modal content or create the multiple content to browse between using them.
$('.popup').each(function() {
$(this).appendTo(content);
});
var items = $('.popup'),
len = items.length,
cur = 0;
$next.click(function() {
cur++;
if (cur === len) cur = 0;
items.eq(cur).show();
});

JQuery UI Tabs from Dynamically Created DIVS

I am creating an information dashboard to show the results of various actions for a web app.
I would like to show data in tables, organized by tabs, ie each tab is different category with corresponding table. The trouble is these tabs and tables need to be created on the fly based on an ajax response.
Right now I have this skeleton for the tabs in my html:
<div id="tabs">
<ul></ul>
</div>
From my ajax request I get all of the categories and all of the data as JSON, and in javascript:
function(data){
//making the tab links and content divs
$.each(data.cat, function(){
$('#tabs ul').append('<li>'+this.name+'</li>');
$('#tabs').append('<div id="'+this.id+'"></div>');
}
//making the tab content
//cycle through all results, adding each to the table in div of its category
$.each(data.results function(){
var selector = '#' + this.catid + ' table tbody';
$(selector).append('<tr><td>'+this.something+'</td><td>'+
this.somethingelse + '</td></tr>');
}
$( "#tabs" ).tabs();
}
This is "working" right now. It appropriately puts the data into the right divs that is creating, but the styling when I call tabs() is not taking place so I just have divs underneath each other. I know the problem -- these divs are new to the DOM and jquery isn't seeing them, but I have no idea how to fix it!

jQuery is seeing the modified DOM by the time you are calling .tabs(), if tabs is being called before you call your ajax, then using the .tabs('add'...) is the correct method to be using (see below). On a side note, you have some Javascript errors in your code, but it does work: as you posted: http://jsfiddle.net/highwayoflife/AcV3H
For adding new tabs, you should use the .tabs('add' ...) method.
.tabs( "add" , url , label , [index] )
Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.
NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id.
So your code may look something like...
function(data) {
$('#tabs').tabs();
...
$.each(data.cat, function() {
$('#tabs').tabs('add', this.id, this.name);
});
}