Develop Reference

change tag <h1>, if change page

I have some JavaScript code, and if the homepage or index (e.g. at malaspulang.com) the tag <h1> does not change. But if I change the page (e.g. at malaspulang.com/lifestyle), the tag <h1> will be replaced with <h2>.
This my code:
<div id="header" class="hide"><h1>this my title</h1></div>
<script>
if(window.URL === 'malaspulang.com'){
}else{
$('#header').empty();
$('#header').html('<h2>this my title</h2>');
}
</script>
In my homepage site, the tag <h1> should replace with <h2> I think that my code is true, but I am so confused with this code. So if anyone can help me, I will be happy :)
NB: If anyone that's code with PHP, you can tell me :)

Maybe like this :
<div class="hide" id="header">
<h1>this my title</h1>
</div>
<script>
$(document).ready(function(){
console.log(document.URL);//this optional , just display your link at now
var uri= document.URL;
if(uri == 'http://malaspulang.com/'){ //use full link from your site
//do nothing , because logical true
}else{
$('#header').empty();
$('#header').html('<h2>this my title</h2>');
}
});
</script>
hope this help you

Access id using #header
$('#header').empty();
$('#header').html('<h2>this my title</h2>');

Replace $('.header') with $('#header')
$('#header') - targeting element with id attribute 'header'.
$('.header') - targeting element with class attribute 'header'.

Your problem is that your element does not have a class defined. As seen here: <div id="header"><h1>this my title</h1></div>, it has the id of 'header' not the class of header. This means that your JavaScript needs to be calling for an id of 'header' and not a class.
Here is the code that will work:
$('#header').html('<h2>This is my title</h2>');

Instead of using window.URL try to use window.location.href and also write complete url name: http://malaspulang.com
<div id="header" class="hide">
<h1>this my title</h1>
</div>
<script>
if (window.location.href === 'https://fiddle.jshell.net/_display/') { // current url
document.getElementById('header').innerHTML = "";
document.getElementById('header').innerHTML = "<h1>this my title (h1)</h1>";
}
else {
document.getElementById('header').innerHTML = "";
document.getElementById('header').innerHTML = "<h2>this my title (h2)</h2>";
}
</script>
You can also try it on jsfiddle

if($("body").hasClass("home")) {
// don't do anything.
} else{
// fire your code.
}

Use $('#header') instead of $('.header') (select by id, not by class). And you do not need $('.header').empty().

appending elements in jquery

i am trying to append a div to other div here :
<script>if($(window).width()>500){
$("body").append("<?php include('includes/middle.php') ?>");
}
</script>
Which becomes:
<script>if($(window).width()>500){
$("body").append("<div class='middle'>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/11-illustrations-that-perfectly-capture-how-life-changes-when-we-grow-up'>
<img src='https://files.brightside.me/files/news/part_31/310360/12086810-10111660-1-0-1487765591-1487765607-0-1488442321-0-1488458395-1488458410-650-1-1488458410-650-0c369e17e2-1488484030.jpg'>
<div class='miniTitle'>11 Illustrations That Perfectly Capture How Life Changes When We Grow Up<br /><span>2017-03-17 17:12:36</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/10-things-you-didnt-know-about-the-us-secret-service'>
<img src='https://www.whitehouse.gov/sites/whitehouse.gov/files/images/first-family/44_barack_obama%5B1%5D.jpg'>
<div class='miniTitle'>10 Things You Didn't Know About<br /><span>2017-03-17 15:15:29</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/who-is-actually-dumb-and-dumber-after-watching-these-crime-serials'>
<img src='https://s-media-cache-ak0.pinimg.com/originals/36/45/e6/3645e66b26b611a30fabf923f7247d23.jpg'>
<div class='miniTitle'>Who is Actually 'dumb' and 'dumber' after this? <br /><span>2017-02-28 00:00:00</span></div>
</a>
</div>
</div>");
}
</script>
what am i doing wrong here? i feel its something wrong because of double or single quotes.why isn't it working?

Updating my original answer:
First, you need to wrap your code in document.ready(). It should append when the dom is ready.
Second, it is not working because your outputted HTML is on multiple lines. If you look at your console, you would see the following errors:
Uncaught SyntaxError: Invalid or unexpected token
There are many ways to solve this issue, the simplest would be to use template literals, this means you should wrap your code within backtick.
$(document).ready(function () {
if ($(window).width() > 500) {
$("body").append(`<?php include('includes/middle.php') ?>`);
}
});
However, this solution may not be compatible with all browsers as this feature has been introduced in ES6.
A much better way would be to call the sidebar.php via ajax.
$(document).ready(function () {
if ($(window).width() > 500) {
$.get("includes/middle.php", function (data, status) {
$("body").append(data);
})
}
});

This script can not execute because your PHP file have multiple line. And multiple line will make your JS syntax wrong.
You need include this php file in a hidden script, and use jQuery to get this div content and append into body.
And as #Hyder B say, you need put this script execute when document has been ready.
You can try this way:
<div id="included_content" style="display:none">
<?php include('includes/middle.php') ?>
</div>
<script>
$(document).ready(function() {
if($(window).width() > 500){
$("body").append($("#included_content").html());
}
});
</script>

Try this:
if($(window).width()>500){
$.ajax({
url: 'includes/middle.php',
success: function(html) {
$("body").append(html);
}
});
}

Based on this answer and as you directly echo inside the included page, you can use backtick (`) to wrap multiline string in js properly.
<script>
$(document).ready(function() {
if($(window).width()>500){
$("body").append(`<?php include('includes/middle.php'); ?>`);
}
});
</script>

How to create dynamic Uikit modal [Joomla]

I want to have one modal, only with content changing. In modal im showing articles via iframe. The problem is that my solution is a bit laggy, and you can see previous article before changing. Im using JS:
function switchTitleMod1(title,id) {
document.getElementById("titleMod1").innerHTML = title;
document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component";
}
The modal code:
<div id="informacje" class="uk-modal">
<div class="uk-modal-dialog" >
<a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a>
<div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Zapisz si? na kurs</h2></div>
<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0">
</iframe>
<div class="uk-modal-caption">Copyright by MRP-KODER</div>
This is how i call the modal:
<a onclick="switchTitleMod1('Szkolenia HACCP','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary"> <i class="uk-icon-info uk-icon-justify"></i>Informacje</a>
My question is: How to create modal via Jquery and only adding deleting DOM. Link to the page: link
Via clicking "Informacje" You will see what the problem is.

I found solution by myself :) I didint use DOM model, but it works fine, for using diffrent modals only by changing button id.
var $jq = jQuery.noConflict();
$jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal);
function open_info_modal(e)
{
var articleId = $jq(e.target).data('id');
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">');
},
'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
function open_ask_modal(e)
{
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">');
},
enter code here'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}

Including <div></div> in a library

I have a few "div" sections that are called by my Javascript function using document.getElementById('ID_NAME').style.display='block'.
My question, is there a way to include these "div's" in a .js, .css or another type of library sourced from my header?
If I copy and paste the div code directly into the head it works fine, however, when I try to include it in my .js or .css libraries it wont execute.
CODE
<script type="text/javascript>
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(function(){
document.getElementById('EXAMPLE1').style.display='block';}, 3000);}}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
I know there has to be a way to insert "div" code into a library. I need some of my clients to "src" it into their own websites easily.
Much appreciated Stack community!
Jon

In another separate JS file, divs.js:
divs.js
function changeDiv(){
document.getElementById('EXAMPLE1').style.display='block';
}
index.html
<script src="divs.js"></script>
<script type="text/javascript">
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(changeDiv, 3000);
}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
Also, there seems to be syntax errors in your code. Try to run this file with a JS console (use something like "Firebug") for debugging purposes.

I wanted to post that I finally worked this problem out. While my Javascript library wouldn't support code with some code in it, I was able to convert everything with DOM.
OLD CODE::
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
NEW CODE::
var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com/");
embed.setAttribute("width", "100%");
embed.setAttribute("height", "100%");
var content = document.createElement('div');
content.id = 'EXAMPLE1';
content.className = 'offer_content';
content.appendChild(embed);
document.getElementsByTagName('body')[0].appendChild(content);

Passing javascript variable from iframe to URL

Lets say I have a function like this:
<script type="text/javascript">
function ReturnURL()
{
var url = document.URL;
var url2 = url.split("=");
var urlID = url2[url2.length-1];
//window.open('http://localhost/POSkill/skillshow.aspx?user_id =' + urlID);
return urlID;
}
</script>
And I also have iframe in my html file which is something like below:
<iframe id="showSkill" scrolling="yes" src="http://localhost/POSkill/skillshow.aspx?user_id = ReturnURL()" height="350" runat="server" ></iframe>
Now all I want to do is to send the urlID value of javasrcipt as the user_id value in iframe. I have tried by using user_id = ReturnURL() but its not working.
How can I do this?
Thanks in Advance.

I answered something very similar at enter link description here
The answer is that you must set the "src" value on the JS rendering.
This means that somewhere in your javascript you should have the following code
...
document.getElementById("showSkill").src="http://localhost/POSkill/skillshow.aspx?user_id =" + ReturnURL()
...
This should work just fine.