I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>
You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.
You want to use PJAX,
Here's a link for an example.
As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>
Related
so I finished a coding bootcamp a little while ago and I'm still pretty novice to Javascript. I'm having issues finding a solution to creating dynamic code. Basically I have an email Icon under every employee on the team and when hovering over the icon I want it to show their email. I can hard code this but we have multiple team pages with a different amount of employees on them.
<div class="member">
<img class="member-img" src="/assets/images/signage/example.png" alt="">
<h5 class="member-details">example</h5>
<img onmouseover="showEmail()" onmouseleave="hideEmail()" class="email-icon" id="emailIcon2" src="/assets/images/email-asset-128-fix.png" alt="">
<h5 class="email-txt" id="emailTxt">example#email.com</h5>
</div>
Specifically on this page I have 3 other of these divs for each team member. I have put both the Icons and Email texts h5s into arrays with the code below.
const allIcons = [];
$('.email-icon').each(function() {
allIcons.push(this);
});
console.log(allIcons);
const allEmails = [];
$('.email-txt').each(function() {
allEmails.push(this);
})
console.log(allEmails);
Being newer to Javascript I'm struggling to figure out what I should do here and I can't find a similar solution to this online. I want it be when I hover over Icon 1 it shows Email 1 and so forth, same goes for onmouseleave I just want to hide the h5 again. My css for the email-text is below.
.email-txt {
color: #474747;
margin: 0;
padding: 3px;
transform: translateY(-260%);
border-style: solid;
border-radius: 5px;
border-color: #474747;
background-color: darkgray;
color: black;
display: none;
}
I've tried this solution Change Color of Icon When Hovering Over Adjacent Text With jQuery
I don't know if I'm just not doing it right or what but can't get it to work.
Feel free to judge my code too, the more advice the better :). Thanks!
Assuming that the email addresses are in an array, all you need to do is generate a new image with its title attribute set to the email address for each array entry:
["1#2.com", "3#4.com", "4#5.com", "5#6.com"].forEach(function(item){
let link = document.createElement("a"); // Create dynamic anchor
link.href = "mailto:" + item; // Set link to go to array item
let img = document.createElement("img"); // Create dynamic image
img.alt = item; // Set the required alt attribute
img.src = "https://illustoon.com/photo/dl/2751.png"; // Set image source
img.title = item; // Set the tooltip for the image to the array item
link.append(img); // Put the image in the anchor
document.body.append(link); // Put the anchor on the page
});
img { width: 30px; }
<p>Hover over each icon to see the email address
NOTES:
Don't store HTML elements in an array - - they are already in the DOM so there's no reason to maintain a second list of them. Just store the data you want to work with in the array.
Don't use headings (<h1>...<h6>) because of how the text is styled by the browser. Headings are to define document structure and are essential for those who use assistive technologies (like screen readers) to browse the web. An <h5> would only ever be used to sub-divide an existing <h4> section. And an <h4> should only be used to sub-divide an <h3> section, and so on.
You are using JQuery in your code. While there's nothing inherently wrong with JQuery, it's widely overused to solve simple coding scenarios. Your situation here is very simple and really doesn't warrant JQuery. Learn JavaScript very well before learning JavaScript libraries and frameworks.
You could use CSS to handle the hovering effect, when possible CSS is preferrable over JS to handle these scenarios:
const employees = [{
email: "member1#email.com",
img: "👮"
}, {
email: "member2#email.com",
img: "👷"
}, {
email: "member3#email.com",
img: "💂"
}, {
email: "member4#email.com",
img: "🕵"
}]
employees.forEach(d => {
const html = ` <div class="member">
<div class="member-img">${d.img} </>
<h5 class="member-details">${d.email.match(/.*(?=#)/)}</h5>
<div class="email-icon">✉️<h5 class="email-txt" id="emailTxt">${d.email}</h5></div>
</div>`
root.innerHTML += html
})
#root {
display: flex;
justify-content: center;
}
.member {
display: flex;
flex-direction: column;
align-items: center;
}
.email-icon {
position: relative;
font-size: 3rem;
cursor: pointer;
}
.email-txt {
display: none;
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
}
.email-icon:hover .email-txt {
display: block;
}
<div id="root"></div>
I have many buttons that change/add/remove elements. Some of the elements are dynamic e.g. clicking button one will create button two etc.
I'd like to save the state of the buttons/page in local storage. If I clicked button one, and then two, the background is now red. When the visitor returns (after browser close) it will be as if they have already clicked one>two and will see the red background as before.
I've been reading Mozilla setItem and every post on Stackoverflow about local storage but I can't find any examples of this exact scenario.
https://jsfiddle.net/oh9q2Lzw/1/
$('.one').on('click', function() {
$('.blue').removeClass('blue').addClass('green');
});
$('.two').on('click', function() {
$('.green').removeClass('green').addClass('red');
});
button {
padding: 10px 40px;
}
.blue {
width: 200px;
padding: 20px;
background: blue
}
.green {
width: 200px;
padding: 20px;
background: green
}
.red {
width: 200px;
padding: 20px;
background: red
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<br>
<div class="box">
<button class="one">one</button>
<button class="one">one</button>
<button class="two">two</button>
</div>
<br>
<div class="blue"></div>
<br>
<div class="blue"></div>
In your example, the only memory the page needs is the class name of the divs applied when the style was last changed.
Therefore, the simple solution is to store the class name in local storage each time it changes by modifying your button events as follows:
$('.one').on('click', function() {
$('.blue').removeClass('blue').addClass('green');
localStorage.setItem("div-class", "green");
});
$('.two').on('click', function() {
$('.green').removeClass('green').addClass('red');
localStorage.setItem("div-class", "red");
});
When the page loads, the hard-coded class is always "blue" and so this can be changed if a value is stored in local storage.
This is done by adding a function to the window.onload event:
window.onload = function() {
if (localStorage.getItem("div-class")) {
$('.blue').removeClass('blue').addClass(localStorage.getItem("div-class"));
}
};
The SO snippet tool doesn't allow local storage access but I've modified your JS fiddle with a working example: https://jsfiddle.net/g5wqjo2h/
I've also made a modified version with an extra button to allow you to clear localStorage during development. If the clear memory button is clicked, when the js Fiddle is next run or loaded, the divs return to the default blue class. Otherwise, the previous colour is loaded from localStorage. : https://jsfiddle.net/g5wqjo2h/1/
I have the code below to change the height of a div to equal that of its parent.
$('#infodiv').css("height",$("#infocol").outerHeight());
The problem is that the height of the child element #infocol, is no longer dynamic if i load new content inside of it. Is there a way to make the child element dynamic again after i have set the height with the above code?
I have tried to reconfigure its height after the content is loaded with the same code, but so far that hasn't worked.
There is a way you can solve this issue using ResizeObserver
However, note that it's not supported in some browsers, check the page I've linked for further details.
Here is a working example:
$(function () {
$("#add-content").click(function () {
$(".first-col").append("<p>More dynamic content...</p>");
});
// keep the second-col same size as first
$(".second-col").css('height', $(".first-col").outerHeight());
const resizeObserver = new ResizeObserver(function (entries) {
for (let entry of entries) {
// once one of the entry changes we want to update the other size too!
$(".second-col").css('height', $(entry.target).outerHeight());
}
});
// We need to pass the actual DOM node, hence the [0]
resizeObserver.observe($(".first-col")[0]);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 23.5rem;
margin: 1rem auto;
}
.first-col {
background: cornflowerblue;
}
.second-col {
background: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="first-col">
<p>Some content</p>
<p>Some content</p>
<button id="add-content">Add content</button>
</div>
<div class="second-col"></div>
</div>
Though, I suggest before implementing it like that, that you look into how flex works or simply even min-height might be the proper tool for the issue here. If you're out of options, feel free to use ResizeObserver, but it's considered an exotic solution!
I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (i.e. from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:
CSS:
\23 toggle-id-1 {
background-color: red;
}
JS:
var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");
\23 toggle-id-1.onclick = function(){
\23 toggle-id-1.style.backgroundColor = "green";
}
In JSFiddle this worked without any problems, is there anything different for this plugin?
Thank you!
jQuery solution:
$("#toggle-id-1").click(function () {
$(this).toggleClass("green");
});
#toggle-id-1 {
background-color: red;
height: 100px;
width: 100px;
}
#toggle-id-1.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>
You can't have spaces in variable names. Name your variable something else.
I was wondering if there was a way to have a centered item shift smoothly when its width changes?
In my case, I have a piece of text on the left that stays the same, and the piece of text on the right will change depending on what page you are on.
<div id="title-container">
<h1 class="inline-header">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
The total width of this will change as a result, and it will shift abruptly.
Here is a jsfiddle demonstrating the problem.
https://jsfiddle.net/sm3j26aa/3/
I've currently worked around it by just fixing the left side using relative positioning and translates, but if I can get the smooth transition, I would rather do that.
Thanks for any help!
Instead of fading just the right portion in and out, you'll need to fade the entire line.
Also, there is no need for individual functions for each word change. Just have one function that accepts the new word as a parameter.
Lastly, don't use inline HTML event attributes to set up event handlers. It:
creates spaghetti code that is more difficult to read
creates anonymous wrapper functions that alter the this binding
within the function
doesn't follow W3C DOM Even Standards
Instead set up your event handlers in JavaScript.
var $titleContainer = $('#title-container');
var $titleCategory = $('#title-category');
$("button").click(function(){ change(this.textContent); })
function change(text) {
$titleContainer.fadeOut(300, function() {
$titleCategory.text(text);
$titleContainer.fadeIn(600);
})
}
#title-container, #button-container { text-align: center; }
.inline-header { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
<h1 class="inline-header left">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
<button>Sample</button>
<button>Hello</button>
<button>SampleX2</button>
</div>
var $titleCategory = $('#title-category');
function changeToSample() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('sample');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 14em/2)`;
})
}
function changeToHello() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('hello');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 12em/2)`;
})
}
function changeToDoubleSample() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('samplesample');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 20em/2)`;
})
}
#title-container {
margin-left: calc(50% - 12em/2);
transition: .2s;
}
#button-container {
text-align: center;
}
.inline-header {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
<h1 class="inline-header">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
<button onclick="changeToSample();">Sample</button>
<button onclick="changeToHello();">Hello</button>
<button onclick="changeToDoubleSample();">SampleX2</button>
</div>