i've got 20/30 divs.
If i click on a button the onClick will tell the function to show welcomeDiv1
but it should also hide welcomeDiv2/3/4/5/6 etc..
Same with showing welcomeDiv7, then it needs to hide welcomeDiv1/2/3/4/5/6/8/9 etc..
Script:
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
^^ Now it actually should hide all divs named welcomeDiv.. expect welcomeDiv1
First code
<div class="websites">
<div id="welcomeDiv" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="welcomeDiv1" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
</div>
And second code
<a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
<script>
function showDiv() {
document.getElementById('welcomeDiv1').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
<script>
function showDiv1() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>
You must use for loops, for example
function showDiv(div){
for (i = 0; i => 100; i++){
var x = document.getElementById('exampleDiv-' + i);
x.style.display = 'none';
//You can also use visibility to get animations work.
}
var y = document.getElementById('exampleDiv-' + i);
y.style.display = 'block';
}
You can refactor your HTML/Script. Persist target with the element, which can be later retrieved using Element.dataset property.
Learn to use addEventListener() to attach event handler.
Here is a sample snippet:
document.querySelectorAll('.button').forEach(function(element) {
element.addEventListener('click', function() {
var _this = this;
document.querySelectorAll('.welcome').forEach(function(welcome) {
if (_this.dataset.target == welcome.id) {
welcome.style.display = "block";
} else {
welcome.style.display = "none";
}
})
});
});
.welcome {
display: none
}
<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Also give each div a class WelcomeDiv. Then, you just hide the entire WelcomeDiv class and show the one you want. For example:
divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";
A simple and easy solution for you:
<a title='Project 1'class="text1" onclick="showDiv('welcomeDiv1')">Project 1</a>
<a title='Project 2' class="text1" onclick="showDiv('welcomeDiv2')">Project 2</a>
<div class="websites">
<div id="welcomeDiv1" style="display:none;" class="answer_list" >1</div>
<div id="welcomeDiv2" style="display:none;" class="answer_list" >2</div>
</div>
<script>
function showDiv(div_id) {
var divsToHide = document.getElementsByClassName("answer_list"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none"; // hide your divisions
}
document.getElementById(div_id).style.display = "block"; //show your division
}
</script>
Alright i fixed it my self, with some help of the lovely internet
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
And HTML 1:
<input id="tempDivName" type="hidden" />
<a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>
<a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>
<a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>
And html 2:
<div id="myDiv1" style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv2" style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
<div id="myDiv3" style="display:none;" class="answer_list" ><object data="cv/Practiced.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
If you are trying without a loop as you have n set of a and div(loop through more elements affects performance), then I would suggest to go with adding show class to the showing div
function showDiv(t) {
if (document.querySelector('.show'))
document.querySelector('.show').className = "welcome";
document.getElementById(t.dataset.target).className = "welcome show";
}
.welcome {
display: none;
}
.show {
display: block;
}
.button {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>
<br/>
<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>
Using radio button
If you are trying without a loop as you have n set of a and div, then I would suggest to go with a hidden radio button method
function showDiv(t) {
document.getElementById(t.rel).click();
}
.answer_list {
display: none;
}
.webrad {
display: none;
}
.webrad:checked+.answer_list {
display: block;
}
.text1 {
background-color: #0095ff;
border-color: #07c;
cursor:pointer;
padding:0px 20px;
}
<div class="websites">
<a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
<a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
<input id="welcomeRadio" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
<input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
<div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
</object></div>
</div>
Related
I have a page that includes elements like these:
<div id="1" style="display: block;">
[...]
</div>
<div id="2" style="display: none;">
[...]
</div>
<div id="3" style="display: none;">
[...]
</div>
<button id="next" onclick="ScrollNext()">
<button id="previous" onclick="ScrollPrevious()">
When a user clicks "next", I want to determine which [div] is currently showing as "display: block;" modify that [div]'s style to "display: none;", and then modify the next sequential [div]'s style to "display: block;" (and of course I want to do the opposite when the user clicks the "previous" button)
I know how to write code for a button to toggle a single element this way, but how can I determine programmatically which element's style to modify?
I have an implementation using JavaScript as below. I have given distinct color to the div for the sake of observing the change. We basically make use of nextElementSibling and previousElementSibling properties of the Node to cycle forward and backward. Finding the current visible node is just a .find away.
const divs = [...document.querySelectorAll('.container')];
function getVisibleDiv() {
const visibleDiv = divs.find(div => div.style.display === 'block');
return visibleDiv;
}
function next() {
const visibleDiv = getVisibleDiv();
visibleDiv.style.display = 'none';
if (visibleDiv.nextElementSibling?.className === 'container')
visibleDiv.nextElementSibling.style.display = 'block';
else {
divs[0].style.display = 'block';
}
}
function previous() {
const visibleDiv = getVisibleDiv();
visibleDiv.style.display = 'none';
if (visibleDiv.previousElementSibling?.className === 'container')
visibleDiv.previousElementSibling.style.display = 'block';
else {
divs[divs.length - 1].style.display = 'block';
}
}
.container {
width: 100px;
height: 100px;
background: green;
}
.container:nth-child(2) {
background: orange;
}
.container:nth-child(3) {
background: yellow;
}
<div id="1" class='container' style="display: block;">
</div>
<div id="2" class='container' style="display: none;">
</div>
<div id="3" class='container' style="display: none;">
</div>
<button id="next" onclick="next()">Next</button>
<button id="previous" onclick="previous()">Prev</button>
I have three buttons
<button type="button" id="btn-Low" class="btn btn-success disabled">Green</button>
<button type="button" id="btn-Medium" class="btn btn-warning disabled">Orange</button>
<button type="button" id="btn-High" class="btn btn-danger disabled"></button>
I want to show an image for each of them if disabled get removed from there class.
Here are the images:
<img src="assets/media/logos/red.jpg" id="red" style="width: 250px; height: 250px; display: none" alt="" />
<img src="assets/media/logos/green.jpg" id="green" style="width: 250px; height: 250px; display: none" alt="" />
<img src="assets/media/logos/orange.jpg" id="orange" style="width: 250px; height: 250px; display: none" alt="" />
Here is what i tried:
<script>
var delta = document.getElementById("red");
if (document.getElementById('btn-High').disabled === false;) {
delta.style.display = "block";
} else {
delta.style.display = "none";
}
</script>
<script>
var omega = document.getElementById("green");
if (document.getElementById('btn-Low').disabled === false;) {
omega.style.display = "block";
} else {
omega.style.display = "none";
}
</script>
<script>
var alpha = document.getElementById("orange");
if (document.getElementById('btn-Medium').disabled === false;) {
alpha.style.display = "block";
} else {
alpha.style.display = "none";
}
</script>
Here is an approach:
Add the image you want to show inside of the button:
<button class="btn disabled">
<img src="..." />
Color
</button>
Then add some CSS to hide the image when the button has a class of .disabled:
.btn.disabled > img {
display: none;
}
Use JQuery hasClass, for the event use the same when the disabled class is removed.
https://api.jquery.com/hasclass/
if (! $( "#btn-Low" ).hasClass( "disabled" )){
$( "#red" ).show();
}
I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more
Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>
You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});
$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});
I have an issue with the roll over and change the cursor to a hand on a hover over two images here is the code I use for the hide/display:
<div class="listing">
<span style="float:right; margin:-10px 100px 0px 20px;">Change view: </span>
<input class="listing" id="List" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="listing" for="List">
<img src="/devsite/images/icons/row.png" alt="List" title=" List " border="0"></label>
<input class="listing" id="Grid" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="listing" for="Grid">
<img src="/devsite/images/icons/table.png" alt="Grid" title=" Grid " border="0"> </label>
</div>
<div id="formdiv" style="display: block;"> some stuff </div>
<div id="formdiv2" style="display: block;"> some different stuff </div>
The javascript :
<script language="javascript">
function hideForm(){
if (document.getElementById('List').checked==true){
document.getElementById('formdiv').style.display="block";
document.getElementById('formdiv2').style.display="none";
} else {
document.getElementById('formdiv').style.display="none";
document.getElementById('formdiv2').style.display="block";
};
if (document.getElementById('Grid').checked==true){
document.getElementById('formdiv').style.display="none";
document.getElementById('formdiv2').style.display="block";
} else {
document.getElementById('formdiv').style.display="block";
document.getElementById('formdiv2').style.display="none";
};
}
</script>
What I need is a roll over cursor change, and background color change on selected radio buttons...the hide/show visible are working fine
For background color change you can use this:
YourElement.style.background = "#000000"
For cursor change:
YourElement.style.cursor = "type"
For different types of the cursor: cursor types doc
To display a cursor on hover try the following css:
img:hover {
cursor:pointer;
}
For the background, using jquery you can do the following:
$("#elementid").css("background", "#000000")
I have changed the radio code to :
<span style="float:right; margin:-10px 100px 0px 20px;">Change view: </span>
<input class="listing" id="List" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="List" for="List">
<img src="/devsite/images/icons/row.png" alt="List" title=" List " border="0"></label>
<input class="listing" id="Grid" style="visibility: hidden;" name="listing" onclick="hideForm()" type="radio">
<label class="Grid" for="Grid">
<img src="/devsite/images/icons/table.png" alt="Grid" title=" Grid " border="0"> </label>
</span>
and the javascript to:
<script language="javascript">
function hideForm(){
if (document.getElementById('List').checked==true){
document.getElementById('formdiv').style.display="block";
document.getElementById('formdiv2').style.display="none";
List.style.background = "#FFFFFF";
Grid.style.background = "#111111";
List.style.cursor = "pointer";
Grid.style.cursor = "pointer";
} else {
document.getElementById('formdiv').style.display="none";
document.getElementById('formdiv2').style.display="block";
List.style.background = "#111111";
Grid.style.background = "#FFFFFF";
List.style.cursor = "pointer";
Grid.style.cursor = "pointer";
};
if (document.getElementById('Grid').checked==true){
document.getElementById('formdiv').style.display="none";
document.getElementById('formdiv2').style.display="block";
List.style.background = "#111111";
Grid.style.background = "#FFFFFF";
List.style.cursor = "pointer";
Grid.style.cursor = "pointer";
} else {
document.getElementById('formdiv').style.display="block";
document.getElementById('formdiv2').style.display="none";
List.style.background = "#FFFFFF";
Grid.style.background = "#111111";
List.style.cursor = "pointer";
Grid.style.cursor = "pointer";
};
}
</script>
this is just getting messy.....
How can I make a ''spoiler'' but instead of a button there's a image? Here's the code I used.
<style type="text/css">
body,input
{
font-family:"Trebuchet ms",arial;font-size:0.9em;
color:#333;
}
.spoiler
{
border:1px solid #ddd;
padding:3px;
}
.spoiler .inner
{
border:1px solid #eee;
padding:3px;margin:3px;
}
</style>
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
It isn't necessary to use this code, I only want it to be an image instead of a button.
It's working fine with me: http://jsfiddle.net/48PBY/
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://pbs.twimg.com/profile_images/858514627/eppaa_bigger.jpg" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<a href="javascript:;" onclick="showSpoiler(this);" >
<img src="image/path"></a>
try this