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>
Related
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 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');
I am trying to adjust the side image of a site, each button should change the image to a different src, I tried this:
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "newImage.png");
});
});
and a few other variations but for some reason the jquery is not catching ? Or perhaps it is something with my syntax? From my inderstanding i just have to
Here is my html:
<html>
<head>
<meta charset="utf-8">
<title>CAPP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
});
});
</script>
<body>
<div id="logodiv">
<img id="logo" src="logo.png" alt="logo"/>
</div>
<div id="h1s">
<img src = "Origionalimage.png" id="frame"/>
<div class="h1padding"></div>
<a class = "h1" href="" id="introID">Intro</a>
<div class="h1padding"></div>
<a class = "h1" href="">ON THE <span class="light">SURFACE</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">From <span class="light">ore to oil</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">Environmental <span class="light">care</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">Much more than <span class="light">gasoline</span></a>
<div class="h1padding"></div>
<a class = "h1" href="">One more <span class="light">thing</span></a>
</div>
</body>
Thanks in advance :)
You must not embed your own script inside a script tag if the src attribute is set.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#introID").hover(function(){
$("#frame").attr("src", "assets/images/much-more-than-gasoline.png");
});
});
</script>
That should do the trick. Here you will find more information.
I think It's better that I explain like this:
There are 6 small images on the page next to each other
user clicks on one of them
all of the 5 other images (except for the image that the user clicked) will have an opacity of 0.7
A large version of the image (the image that the user has been selected) will show. ( I have an img tag and the image src will replace the src of the tag )
Can you tell me how can I do that? I prefer using JavaScript and Angular JS, But if you need it, there's no problem if you use JQuery too. sorry for bad English. Thank you
Update: some user asked me what I tried... This is my code and I know It will not work... that's why I'm asking this from you...
<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
<!-- Adding meta information -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mohsen Nirouzad - http://AproZ.ir">
<!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design -->
<!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag -->
<meta name="application-name" content="{{application_name}}">
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="publisher" content="{{googleplus_url}}">
<meta charset="UTF-8">
<title>{{page_title}}</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/w3rtl.min.css">
<script src="assets/js/angular.min.js"></script>
</head>
<body>
<div data-ng-include="'variables/sidenav.html'"></div>
<div style="margin-right:25%" class="w3-row-padding">
<div class="w3-col s6">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row-padding">
<div class="w3-col">
<div class="w3-col s6">
<img src="{{img1}}" alt="{{img1_alt}}" title="{{img1_title}}"><br>
<img src="{{img2}}" alt="{{img2_alt}}" title="{{img2_title}}"><br>
<img src="{{img3}}" alt="{{img3_alt}}" title="{{img3_title}}">
</div>
<div class="w3-col s6">
<img src="{{img4}}" alt="{{img4_alt}}" title="{{img4_title}}"><br>
<img src="{{img5}}" alt="{{img5_alt}}" title="{{img5_title}}"><br>
<img src="{{img6}}" alt="{{img6_alt}}" title="{{img6_title}}">
</div>
</div>
</div>
<div>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
</div>
</div>
<div class="w3-col s6">
</div>
</div>
<div data-ng-include="'variables/footer.html'"></div>
<script>
var application = angular.module('projects',[]);
application.controller('projects_controller',function($scope){
$scope.description='Some Description',
$scope.keywords='key1,key2,key3',
$scope.application_name='Sarabon',
$scope.googleplus_url='#',
$scope.page_title='پروژه ها'
});
</script>
</body>
</html>
Use ng-click to set a scope variable like selectedImage which can be used in ng-class and ng-src for big image
// small image
<img ng-src="{{img1}}"
alt="{{img1_alt}}"
title="{{img1_title}}"
ng-click="selectImage(img1)"
ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}"
>
// big image
<img ng-if="selectedImage" ng-src="selectedImage ">
In controller:
$scope.selectedImage = null;
$scope.selectImage=function(img){
$scope.selectedImage = img;
}
One solution is to create a big hidden div that takes the whole screen and create an img tag in it without src attribute. in "onClick" event (onClick is for js. I don't know how angular handles clicks!), set that div visible (using css "display property") and set image's src to what you want.
css for the fullscreen div can be like this:
.fullscreen{
display:none;
width:100%;
height:100%;
background-color: black;
opacity: 0.8;
position: absolute;
left:0;
top:0
}
<div class = "fullscreen">
<img src="#"/>
</div>
then you just need to add a few code lines to change display property of the div and change src attribute of img to your desired one.
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();