I learned JavaScript very recently and not really familiar with it.
I've managed to make this wacky website.
I want those buttons on the left to change the contents of the panel that is adjacent to it.
document.getElementsByClassName('left-panel')[0].innerHTML = `INSERT HTML HERE`;
This is what I used to change the contents of the left-panel.
I wasn't really sure what to do so I just copied the HTML code that I wanted to go in there and put it in the innerHTML.
This seems really messy to me, I don't think putting HTML code in JavaScript is the best way to this but then again I don't really know.
Is there anyway to do this in a better way?
Thank you.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bruh</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<p>Hello</p><br>
</div>
<div class="main-panel">
<p>bro</p><br>
</div>
<div class="buttons">
<div class="button">
<div class="chat-button">
<img onclick="show();" id="chat-button" src="chat-dots.svg">
</div>
<div class="attendants-button">
<img onclick="show2();" id="attendants-button" src="suit-club-fill.svg">
</div>
<div class="tools-button">
<img onclick="show3();" id="tools-button" src="nut.svg">
</div>
</div>
</div>
<div class="screen">
<video id="screen" src="a.mp4">
</div>
<div class="left-panel">
<div class="tools">
<div class="microphone">
<img id="mic" src="mic-fill.svg">
<!-- -->
<p id="mic-status"> on_off </p><br>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
<p>
volume
</p>
</div>
<div class="webcam">
<img id="webcam" src="camera.svg">
<!-- -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<video src="a.mp4" id="webcam-video">
</div>
<div class="options">
<img id="raise-hand-ico" src="hand-index.svg"><br>
<img id="like" src="hand-thumbs-up-fill.svg"><br>
<img id="dislike" src="hand-thumbs-down-fill.svg">
</div>
<div class="record">
<div class="buttons-and-stuff">
<h6 id="button-and-stuff">Record</h6><br>
<h6 id="button-and-stuff">Exit</h6>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript:
function show(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="chat-box">
<div class="chat-history">
<!-- -->
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<!-- -->
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
</div>
<div class="chat-sending-area">
<div class="send-button">
<img class="send-message-button" src="chat-dots.svg">
</div>
<div class="text-box">
<textarea class="text-area">Write your message here...</textarea>
</div>
</div>
</div>`;
}
function show2(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="attendants">
<div class="Hosts">
<p class="head">Hosts</p><br>
<div class="all-the-hosts">
<p class="member"> name1 </p><br>
</div>
</div>
<div class="Presenters">
<p class="head">Presenters</p><br>
<div class="all-the-presenters">
<p class="member"> name2 </p><br>
</div>
</div>
<div class="Attendants">
<p class="head">Attendants</p><br>
<div class="all-the-attendants">
<p class="member"> name3 </p><br>
</div>
</div>
</div>`;
}
function show3(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="tools">
<div class="microphone">
<img id="mic" src="mic-fill.svg">
<!-- -->
<p id="mic-status"> on_off </p><br>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
<p>
volume
</p>
</div>
<div class="webcam">
<img id="webcam" src="camera.svg">
<!-- -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<video src="a.mp4" id="webcam-video">
</div>
<div class="options">
<img id="raise-hand-ico" src="hand-index.svg"><br>
<img id="like" src="hand-thumbs-up-fill.svg"><br>
<img id="dislike" src="hand-thumbs-down-fill.svg">
</div>
<div class="record">
<div class="buttons-and-stuff">
<h6 id="button-and-stuff">Record</h6><br>
<h6 id="button-and-stuff">Exit</h6>
</div>
</div>
</div>`;
}
Update:
Thanks for the responses. I think using a loop to append elements would make this a bit harder, but then again I don't really know what that would look like, I just wanted to know if this is something that is commonly used, even though its not the best way to do it, or its an unholy abomination, in which case I would have to fix it.
I appreciate all the help. :)
You can create elements dynamically and then append it on parent element inside a function by passing custom parameter.
Example:
const createSomeElement=(someSelectedDiv,someParameter,fetchData)=>{
someSelectedDiv.innerHTML=`
<label><b>Search</b></label>
<div class="control has-icons-left has-icons-right">
<input class="input is-small clearInput" placeholder="Search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
<div class="dropdown">
<div class="dropdown-menu">
<div class="dropdown-content results"></div>
</div>
</div>
`;
const input=document.querySelector('input');
const dropdown=document.querySelector('.dropdown')
const resultsWrapper=document.querySelector('.results')
const onInput=async (event)=>{
const items= await fetchData(event.target.value)
for(let item of items){
// dynamically create element
const option=document.createElement('a')
option.classList.add('dropdown-item');
// change html of element.
option.innerHTML=`<span>dropdown item ${item.name}</span>`;
// add some event listener.
option.addEventListener('click',()=>{
dropdown.classList.remove('is-active');
})
// append child to parent div.
resultsWrapper.appendChild(option)
}
}
Related
I use ASP.NET Core based CMS for my website.
What I need is to add new div tag with class button_two if tag h1 item_title has this text "Peow, Wow.".
How can I do it using ASP.NET code or using jQuery (using closest and append)?
Link to JSFiddle
<div class="items">
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
</div>
You can use :contains() selector , next() and `append()'
$('h1:contains("Peow, Wow")')
.next('.buttons')
.append('<div class="button_one">BUTTON ONE</div>')
.button_one {color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
</div>
Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.
This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?
function swap_content(conta,contb)
{
var tmp = document.getElementById(conta).value;
document.getElementById(conta).value = document.getElementById(contb).value;
document.getElementById(contb).value = tmp;
var tdp = document.getElementById(text_id1).value;
document.getElementById(text_id1).value = document.getElementById(text_id2).value;
document.getElementById(text_id2).value = tdp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
If you simply want to invert the position of the two elements you can simply use flex reverse.
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes.
This will be much faster to process than rebuilding the dom.
$(function() {
cbToggleFields();
});
$('#example1').off('change').on('change', function() {
cbToggleFields();
});
function cbToggleFields() {
if ($('#example1').is(':checked')) {
$('#rowA').addClass('reverse');
} else {
$('#rowA').removeClass('reverse');
}
}
#rowA{
display:flex;
flex-direction:row;
justify-content:left;
/*For vertical alignment*/
/*flex-direction:column;*/
}
#rowA.reverse{
flex-direction:row-reverse;
/*flex-direction:column-reverse;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="rowA" class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content A</span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span><br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
I recommend using the .click jquery Event Listener to as I have done below. Then I used .html() to get the contents of the div and to swap the contents.
$('#example1').click(function() {
var conta = $('#conta').html();
var contb = $('#contb').html();
$('#conta').html(contb);
$('#contb').html(conta);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
</body>
Using pure javascript here, use value to get the value of the input and swap the content around.
You can even make the function work with different types by adding another paramter to the swap_content function. function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
You can use the same function to swap different elements around.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
function swap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML
swap_content('inp1', 'inp2'); // swap items using value for input
}
<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div>
<div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>
<input type="text" id="inp1" value="Will be placed second" />
<input type="text" id="inp2" value="Will be placed first" />
<button onclick="swap_items();">Swap content</button>
As you are using bootstrap, why not take advantage of the column ordering feature ?
This way it is only a matter of changing class names.
This assume you are using both on the same row (as in your example).
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
I have a list of divs that contain a string in h3 format. Upon clicking these divs (they are all the same class) a screen is displayed (part of the same html doc) containing some sliders for user input.
Is there a way to make it so that when the screen is displayed it contains the string of whatever div was clicked? In other words, if the user taps/clicks the "Push Ups" card, I would like the div "#info" to update to shoe "push Ups", if the user selects "Iquats" I would like "#info" to show "Squats" ec.
I can't think of a way to do this without using JSON or some sort of server magic. CODE!
HTML:
<!--HEADER-->
<div class="header">
<div id="info">
<p>Select Exercise</p> <!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE-->
</div>
</div>
<!--EXERCISE LIST-->
<div id="exerciseContainer">
<div class="exerciseL exercise">
<h3>Push Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Dips</h3>
</div>
<div class="exerciseL exercise">
<h3>Burpees</h3>
</div>
<div class="exerciseR exercise">
<h3>Plank</h3>
</div>
<div class="exerciseL exercise">
<h3>Sit Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Leg Ups</h3>
</div>
<div class="exerciseL exercise">
<h3>Russian Twists</h3>
</div>
<div class="exerciseR exercise">
<h3>Back Raises</h3>
</div>
</div>
<!--SPECIFY TIMING FOR EXERCISES-->
<div id="specifier">
<div id="containSliders">
<!--Exercise time allocator-->
<h1></h1> <!--I WOULD LIKE THIS TO UPDATE ALSO-->
<div id="containSliderOne">
<p>Time:</p>
<output id="timeValue">60 sec.</output>
<input type="range" id="determineTime" step="10" value="60" min="0" max="180" />
</div>
<!--Exercise time allocator-->
<div id="containSliderTwo">
<p>Rest Time:</p>
<output id="restValue">10 sec.</output>
<input type="range" id="determineRest" step="10" value="10" min="0" max="180" />
</div>
<!--Add rest button-->
<div id="addBreak"><p>Add Break</p></div>
<!--Back Button-->
<div id="cancel">
<a id="exerciseCancel" href="exercises.html">
<img src="images/backButtonUp.png" width="100" alt=""/>
<img src="images/backButtonDown.png" width="85" alt=""/>
</a>
</div>
<!--Confirm Button-->
<div id="confirm">
<a id="exerciseConfirm" href="routineOverview.html">
<img src="images/whiteTickUp.png" width="95" alt=""/>
<img src="images/whiteTickDown.png" width="80" alt=""/>
</a>
</div>
</div>
</div>
JavaScript (jQuery)
$(".exercise").click(function()
{
$("#specifier").css("display", "block");
$(".backButton").css("display", "none");
});
Thanks for any help and ideas given!
If I understand you correctly, you can get the clicked element text by using $(this).text() inside the click event.
$(function() {
$('.exercise').click(function() {
$('#info').text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--HEADER-->
<div class="header">
<div id="info">
<p>Select Exercise</p>
<!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE-->
</div>
</div>
<!--EXERCISE LIST-->
<div id="exerciseContainer">
<div class="exerciseL exercise">
<h3>Push Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Dips</h3>
</div>
<div class="exerciseL exercise">
<h3>Burpees</h3>
</div>
<div class="exerciseR exercise">
<h3>Plank</h3>
</div>
<div class="exerciseL exercise">
<h3>Sit Ups</h3>
</div>
<div class="exerciseR exercise">
<h3>Leg Ups</h3>
</div>
<div class="exerciseL exercise">
<h3>Russian Twists</h3>
</div>
<div class="exerciseR exercise">
<h3>Back Raises</h3>
</div>
</div>
<!--SPECIFY TIMING FOR EXERCISES-->
<div id="specifier">
<div id="containSliders">
<!--Exercise time allocator-->
<h1></h1>
<!--I WOULD LIKE THIS TO UPDATE ALSO-->
<div id="containSliderOne">
<p>Time:</p>
<output id="timeValue">60 sec.</output>
<input type="range" id="determineTime" step="10" value="60" min="0" max="180" />
</div>
<!--Exercise time allocator-->
<div id="containSliderTwo">
<p>Rest Time:</p>
<output id="restValue">10 sec.</output>
<input type="range" id="determineRest" step="10" value="10" min="0" max="180" />
</div>
<!--Add rest button-->
<div id="addBreak">
<p>Add Break</p>
</div>
<!--Back Button-->
<div id="cancel">
<a id="exerciseCancel" href="exercises.html">
<img src="images/backButtonUp.png" width="100" alt="" />
<img src="images/backButtonDown.png" width="85" alt="" />
</a>
</div>
<!--Confirm Button-->
<div id="confirm">
<a id="exerciseConfirm" href="routineOverview.html">
<img src="images/whiteTickUp.png" width="95" alt="" />
<img src="images/whiteTickDown.png" width="80" alt="" />
</a>
</div>
</div>
</div>
It would be preferable to create the elements programatically.
var arrExercises = ['Push Ups', 'Dips', 'Burpees'];//add all exercises here
arrExercises.forEach(function(exercise, i){
var $exercise = $('<div>', {id:'div-excercise-'+i, "class":'exercise'});//create the exercise element
//give the on click handler to the exercise
$exercise.on('click', function(e){
$("#specifier").css("display", "block");
$(".backButton").css("display", "none");
$("#info").text(exercise);//set the info to the exercise text
});
$('#exerciseContainer').append($exercise);//append this exercise to the container
});
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.