I want to change the div order through JavaScript. i didn't know how to do that
This is the two div which implement in html, but i want div id="navigation" show in html after div class="row subheader".
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
I want like this from javascript please check follow.
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
Thanks in advance
Assuming you're using jQuery, then use this :
$('#navigation').insertAfter( ".container" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="navigation">
<div class="item" style="display:inline;">
Home
</div>
<div class="item" style="display:inline;">Blog: Kannu</div>
</div>
<div class="row subheader">
<div class="container">
<div id="blogsubheader">My Blog</div>
</div>
</div>
</body>
</html>
As you want to change the DOM. First you need to clone the first section and store it in a variable. Then remove the first element from the DOM. And append this element after the 2nd element.
To do so using jQuery
var nav = $('#navigation').clone(true);
$('#navigation').remove();
nav.insertAfter('.subheader');
In JavaScript
var nav = document.getElementById('navigation');
var subHeader = document.getElementsByClassName('subheader');
subHeader[0].after(nav);
Here is the fiddle link https://jsfiddle.net/moshiuramit/xm85h29g/7/
How about this?
var navigation = document.getElementById('navigation');
var rowSubheader = document.getElementById('row-subheader');
rowSubheader.after(navigation);
You'll have to add an id here though, as I did:
<div class="row subheader" id="row-subheader">
https://jsfiddle.net/zmve7xyc/
If you are changing the order just for the view consider using Flex css property (after checking browser compatibility). DOM manipulation is an intensive operation and you shouldn't do it until absolute necessity.
Simply wrap both div in a wrapper div and toggle class for changing flex-direction of wrapper div
You can use appendTo also in JQuery.
Ex :
var nav = $('#navigation').clone(true);
$('#navigation').remove();
nav.appendTo('.subheader');
Related
I am trying to hide a paragraph tag if all the children of its sibling are set to display none.
Here is an example of some of my code (the rest is just more of the same divs):
var templateheading = $('.js-template-heading');
var templategrid = templateheading.next();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-templates-wrapper">
<p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
<div class="c-templates-grid">
<div class="js-template">Starter 1</div>
<div class="js-template">Starter 2</div>
<div class="js-template">Starter 3</div>
</div>
</div>
<div class="c-templates-wrapper">
<p class="js-template-heading">These themes are available on <strong>Pro</strong> website packages.</p>
<div class="c-templates-grid">
<div class="js-template">Pro 1</div>
<div class="js-template">Pro 2</div>
<div class="js-template">Pro 3</div>
</div>
</div>
Just to store the paragraphs and the grids in their own variables.
So basically, I need to loop through every templategrid and if ALL of the children within it are set to display none via a style tag (done with a filter), add a class to either c-templates-wrapper or js-template-heading (I basically just want to hide the corresponding paragraph it if theres nothing to show within the grid below it).
I hope that makes sense and I hope someone can help.
You could use something like this:
$('.c-templates-wrapper p.js-template-heading').filter(function() {
return $(this).next().find(".js-template:visible").length == 0
}).hide()
Demo
$(".c-templates-wrapper:first .js-template").hide()
$('.c-templates-wrapper p.js-template-heading').filter(function() {
return $(this).next().find(".js-template:visible").length == 0
}).hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-templates-wrapper">
<p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
<div class="c-templates-grid">
<div class="js-template">Starter 1</div>
<div class="js-template">Starter 2</div>
<div class="js-template">Starter 3</div>
</div>
</div>
<div class="c-templates-wrapper">
<p class="js-template-heading">These themes are available on <strong>Pro</strong> website packages.</p>
<div class="c-templates-grid">
<div class="js-template">Pro 1</div>
<div class="js-template">Pro 2</div>
<div class="js-template">Pro 3</div>
</div>
</div>
I have coded. But if I hide the paragraph, on display:none of sibling's children then you cannot see anything because everything will get hidden. So, I modified the code. But you can easily set it according to your need.
I just use CSS to display:none to children. And then on display:none, I change the background-color of Paragraph to red.
$(document).ready(function(){
var paragraph = $(".js-template-heading");
if(paragraph.siblings().children().css("display")=="none"){
paragraph.css("background-color","red");
}
});
.js-template{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="c-templates-wrapper">
<p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
<div class="c-templates-grid">
<div class="js-template">Starter 1</div>
<div class="js-template">Starter 2</div>
<div class="js-template">Starter 3</div>
</div>
</div>
</body>
</html>
im trying to open a different webpage as a colorbox but i cant seem to figure it out.
Below is the webpage i want to open when a person clicks on the image.
<div class="album py-5">
<div class="container">
<div class="row">
<div id="projects" class="col-md-8 col-lg-6 shadow-sm">
<a href="project1.html" id="yourlink"><img class="img-fluid" src="img/mockup.png" alt="iPhone Mockup">
</a>
</div>
</div>
</div>
</div>
Below is the script i did.
<script>
"use strict";
$(document).ready(function(){
$('#yourlink').colorbox();
});
</script>
This is my first time trying to use colorbox so its a little confusing, thank you.
colorbox has a configuration atrtibute called "html" where you can provide html code for it to show. For example:
var code = $('div.py-5').html();
$('#yourlink').colorbox({html: code});
If you can modify the html to show, you could also check the colorbox examples as they include an inline HTML example.
Edit: Here's a working example:
var button = $("#clickme");
$(document).ready(function() {
var code = $("#myContent").html();
$("#clickme").colorbox({ "html": code })
});
#myContent {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
</head>
<body>
<div id="myContent">
<p>Hello World from the content.</p>
</div>
Click me
</body>
</html>
I want to replace all links which are inside a specific DIV using JavaScript.
For example
<div class="div01">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
Now I want to replace www.oldlink.com and www.oldlink2.com with my one new link like www.mynewlink.com. Actually I am using WordPress and do not want to edit it using PHP. I am using a plugin Header and Footer Script to do this.
https://wordpress.org/plugins/header-and-footer-scripts/
Try this:
const div1 = document.querySelector('.tg-one-fourth');
div1.querySelectorAll('a').forEach(a => a.href = '//www.mynewlink.com');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tg-one-fourth">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
</div>
</body>
</html>
Hi everyone I need help with sections I'm using section-container auto with deep_linking;true
i also have data-slug to each tabs,
I have 3 tabs with images on them so basically i want to have a direct link access to each individual tabs to have a link on the homepage. I tried adding location.hash script, also tried the .on click and .trigger, and none of them works.
thanks a lot.
<body>
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><span>tab1</span></p>
<div class="content" data-slug="loans" data-section-content="">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><span>tab2</span></p>
<div class="content" data-slug="tab2" data-section-content="">
<h1>tab2</h1>
</div>
</body>
this is the The simplest way >>>>>> try this :
HTML
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p>
<div class="content" data-slug="loans" data-section-content="" id="panel1">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p>
<div class="content" data-slug="tab2" data-section-content="" id="panel2">
<h1>tab2</h1>
</div>
jquery
$(document).ready(function (){
$('#panel1').hide();
$('#panel2').hide();
$('#tab1').click(function(){
$('#panel1').show();
$('#panel2').hide();
});
$('#tab2').click(function(){
$('#panel2').show();
$('#panel1').hide();
});
});
Demo : here
you can use jquery UI library to make tabs and panels
try this code to figure out what is jquery ui tabs :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
to watch how it's look like see this fiddle
for complete reference see here
In simplest terms your markup would be a <ul> with your tabs, followed by a stack of containers for the content of those tabs. You current markup has them inside the same container, which is going to make the effect hard to pull off.
<ul class="tabs">
<li class="tab1">Tab Title</li>
<li class="tab2">Tab Title2</li>
</ul>
<div class="tab-content">
<p class="tab1">Content for tab 1</p>
<p class="tab2">Content for tab 2</p>
</div>
Here's a fiddle -- tweak the CSS as you see fit, but you really don't need JQuery UI just to build tabs.
Ive done it guys, i just added a script:
<script>
$(document).ready(function(){
$('section').removeClass('active');
var hash = window.location.hash;
if (hash !== '')
{
$('section'+hash).addClass('active');
}
});
it checks the hash in the url then sets the section class="Active".
thanks guys for all the replies.
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<!--
Contenu des pages chargées par le paneau left
-->
<body>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"
<p>recherche </p>
</div>
<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
<p>recherche </p>
</div>
<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
<p>recherche </p>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
<ul data-role="listview" data-type="group"
<li>Menu
<ul>
<li>m1</li>
<li>m2</li>
<li>m3</li>
</ul>
</li>
</ul>
</div>
<div class="Head" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div class="" data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span id="compagnyName">Demo</span>
<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
</div>
</header>
</div>
<div class="HeadSearching" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
<select name="country" id="country" data-align="right">
<option>France</option>
<option>Angleterre</option>
<option>Luxembourg</option>
<option>Espagne</option>
</select>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
</script>
<script>
function changeHead()
{
alert('header replace');
$('.head').replaceWith('.HeadSearching');
}
</script>
</body>
</html>
if someone could help me doing this correctly ..
thanks by advance ;)
Function replaceWith(newContent) as argument use HTML string. replaceWith
You can try something like:
$('.head').replaceWith($('.HeadSearching'));
For this situation maybe is better to use show/hide different div.
This works for me without the '.'
$('Head').replaceWith("HeadSearching");
For class selectors, you need to respect case. You're trying to select the element with $('.head'), but the class name is Head.
I'd suggest you always use lower-case ids and classes for simplicity.
In your case,
$('.Head').replaceWith($('.HeadSearching'));
should work, however you're removing the
element you're trying to replace $('.Head') with:
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
So if you want to replace the .Head element with the .HeadSearching element, you need to remove the second line that removes all .HeadSearching elements.
If you want to hide .HeadSearching initially, then you should use $(".HeadSearching").hide() instead, and when you want to replace it, you could simply do
$(".Head").hide()
$(".HeadSearching").show()
and vice versa.