I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>
By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/
Related
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
I want to use Circletype.js in conjunction with jQuery .animate() to cause text to curve around my logo/image as I animate the width of its container.
I am applying .circleType({fluid:true}); to the #demo4 div. This, along with the correct css, causes the text path to bend to fit its container (#resize).
Run the code snippet to illustrate:
text radius does change when container is resized manually
text radius does not change when resized via .animate(). Why not?
$(function() {
$("#resize").resizable();
$("#resize").draggable();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
});
});
$('#demo4').circleType({
fluid: true,
dir: -1
});
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
You can try this though if you just want the end result. If you want the text to be also animated, then the below code won't work. See if it works for your requirement
$(function() {
$("#resize").resizable();
$("#resize").draggable();
circleInit();
});
$("button").click(function() {
$("#resize").animate({
left: '50px',
width: '650px'
},400,'swing',function() { circleInit(); });
});
function circleInit() {
$('#demo4').circleType({
fluid: true,
dir: -1
});
}
#resize {
position: relative;
width: 220px;
height: auto;
padding: 0.5em;
border: 1px solid;
}
#resize h4 {
text-align: center;
margin: 0;
}
.demo-box {
position: relative;
max-width: 700px;
margin: 10% auto;
color: #476A50;
background-color: #ccc;
}
#logo {
position: absolute;
bottom: 44%;
width: 60%;
height: auto;
margin-left: 23%;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
<h4 class="ui-widget-header">Resize/Drag/Animate</h4>
<div class="demo-box" id="demo-box4">
<h2 id="demo4" class="demo strong">Anything in WordPress </h2>
<img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
</div>
</div>
The code for circletype shows that the text is only reflowed when the window is resized:
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}
I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Strategy Game Dev Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
function illu_area(){
alert("test");
}
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", illu_area());
}
}
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: Tahoma}
.container_main {
margin: 10px;
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.territory_type1 {
width: 100px;
height: 100px;
position: absolute;
}
.territory_type2_horizontal {
width: 200px;
height: 100px;
position: absolute;
}
.territory_type2_vertical {
width: 100px;
height: 200px;
position: absolute;
}
#t6 {
background-color: blue;
left: 200px;
}
#t5 {
background-color: lightblue;
left: 100px;
}
#t4 {
background-color: green;
}
#t3 {
background-color: turquoise;
top: 200px;
}
#t2 {
background-color: lightgreen;
top: 200px;
left: 200px;
}
#t1 {
background-color: brown;
top: 100px;
left: 200px;
}
#t0 {
background-color: yellow;
top: 100px;
left: 100px;
}
.grid {
height: 100px;
width: 100px;
position: absolute;
top :0px;
}
#t3_g2 {
left: 100px;
}
#t4_g2 {
top: 100px;
}
</style>
</head>
<body onLoad="everything()">
<div class="container_main">
<div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
Origin
</div>
<div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
1
</div>
<div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
2
</div>
<div id="t3" class="territory_type2_horizontal">
3
<div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
<div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
</div>
<div id="t4" class="territory_type2_vertical">
4
<div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
<div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
</div>
<div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
5
</div>
<div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
6
</div>
</div>
</body>
</html>
My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...
Note:
it works when i do this:
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});
}
}
But this isnt going to be useful in future i think :P
Help me!
You have to pass your function - omit the ()
.addEventListener("click", illu_area);
Having the () executes the function immediately.
Best all,
I'm trying to debug our CMS (what is mostly AJAX) but jQuery removes all the script tags, what makes me unable to debug the JavaScript, how do I disable this behaviour?
I thought I would find it after a simple Google search but no success :(
Thank you,
EDIT
my Page before:
<script>
jQuery(function(){
inter = null;
jQuery('#parse').click(function(){
jQuery('#answer').load(f(),{"POST":jQuery("#POST").val(),"start":((jQuery('#start').val()-1)*10)},function(){
alert("Burrrnnnnnnn")
console.log("Laten we is kijken: " + inter);
clearInterval(inter);
});
inter = setInterval(function(){
jQuery.getJSON("/googlemonster/backend/status-test",function(json){
setProgressBar(json);
});
},200);
return false;
});
});
function
function setProgressBar(obj){
var g;
jQuery("#progress-bar,#progress-text-alt-wrapper").animate({"width":(((g=obj["%"])==0?1:g)*2) + "px"},{queue:false});
jQuery("#progress-text,#progress-text-alt").text(obj["%"] + "% " + obj["status"]);
}
</script>
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text" />
<br>
Pagina
<input value="1" id="start"
type="number" />
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>
The page after
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text">
<br>
Pagina
<input value="1" id="start" type="number">
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>
You are right – it is a feature of jQuery to strip out script tags. You need to use the basic JavaScript methods instead.
See: Can't append <script> element
Scripts will be evaluated first, and then discarded.
http://api.jquery.com/append/
after some research I finnaly could fix the problem thanks to the guys here,
I made a little plugin for jQuery for it, now the script tags are not getting, removed but executed.
(function($){
$.fn.loadDebuggable = function(url){
data = typeof(arguments[1]) == "object"?arguments[1]:{};
success = arguments[2]||typeof(arguments[1]) == "function"?arguments[1]:function(){};
return $.ajax(url,{
"context":this,
"success":[function(data){
var div = document.createElement('DIV');
div.innerHTML = data;
this[0].innerHTML = "";
while (div.firstChild)
{
this[0].appendChild(div.firstChild);
div.removeChild(div.firstChild);
};
},success],
"type":"GET",
"data":data
});
}
})(jQuery);
Thanks,