In my code, im using an onclick function to show an element with display:none. If I set a second element to display:none, how can i code the script to show both hidden elements onclick?
Here's the code I'm using:
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
Instead of IDs, use classes for your elements and show all elements with that class name on click (I am using jQuery):
Click Me
<div class="elem" style="display:none;"></div>
<div class="elem" style="display:none;"></div>
<script type="text/javascript">
$('#click-me').click(function() {
$('.elem').show();
});
</script>
You gotta put the all elements on a div container, and when you set the display to none, all elements will disappear.
Without jQuery
<input type="button" value="test element1" onclick="showStuff('element1')">
<input type="button" value="test element2" onclick="showStuff('element2')">
<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>
js code :
showStuff = function(id){
document.getElementById(id).style.display = "block";
}
Demo
Related
I have this example in jsfiddle, first example work great, second example don't work regular, problem is, when i mouse hover on another div, button position apply to first div, not second.
http://jsfiddle.net/GepCL/1/
<div class="wrapper" onmouseover="document.getElementById('button').style.display = 'inline';" onmouseout="document.getElementById('button').style.display = 'none';">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button" class="button" style="display: none;">Add to basket</div>
NEW
Add to basket
http://jsfiddle.net/GepCL/18/
'
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button" class="button" style="display: none;">Add to basket</div>
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button2" class="button2" style="display: none;">Add to basket</div>
'
you should put different id for button "add to basket"
The issue is caused by the ID you are using.
As both buttons have the same ID the JavaScript will run until it finds an ID that matches. On hovering over the second div the button will display over the first div because as soon as the JavaScript finds the ID it stops looking as ID's are supposed to be unique.
You could use the next script to make it more automatical and removing the IDs problem:
Javascript:
function fadeOut(div) {
// Remove your DIV with the message Add to basket
var olddiv = document.getElementById('button');
div.removeChild(olddiv);
}
function fadeIn(div) {
// Create a new DIV with your message Add to basket
var newdiv = document.createElement('div');
newdiv.setAttribute('class','button');
newdiv.setAttribute('id','button');
newdiv.innerHTML = 'Add to basket';
div.appendChild(newdiv);
}
HTML:
<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" /></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
</div>
<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" /></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
</div>
Example:
http://jsfiddle.net/GepCL/36/
EDIT: In the code before the button was blinking.
With the next script it is fixed. I've used Jquery to make it easier.
The issue was that adding and removing fires an onmouseout event everytime the DOm is modified.
function fadeOut(div) {
$('#button', $(div)).hide();
}
function fadeIn(div) {
if ($('#button', $(div)).html() == undefined) {
$newdiv = $('<div></div>')
.attr({ id : 'button' })
.addClass("button")
.hide();
$newdiv.text('Add to basket');
$(div).append($newdiv);
}
$('#button', $(div)).show();
}
Example: http://jsfiddle.net/GepCL/57/
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.
<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
First time programmer here, writing simple program on HTML5. Can't seem to get image to display when button is clicked. Here is my code:
<p>
<center>
<button onclick="DeadTest()">
<img src="BeginTest.gif"/></button></center></p>
<script language="javascript" type="text/javascript">
function DeadTest()
{
<img style="border-width: 0px;" src="White.jpg" width="768" height="1280" />
}
</script>
Have looked through countless sites and forums but just can't seem to get it to work. Have tried an alert() function and it is working. I think it must be something to do with the code to call on the image.
First time programmer so it might look idiotic. Teach me, oh guru's...
Learn the basics first on how to properly call the javascript function and how to change the properties.
See my sample demo. Hope you will learn from it.
http://jsfiddle.net/NgryM/1/
<script type="text/javascript">
function ButtonClick()
{
alert('Button was clicked');
}
function ImageClick(){
alert('Image was clicked');
}
function ChangeImageSrc(){
var img = document.getElementById('myImage');
img.src = "http://www.ivankristianto.com/wp-content/uploads/2011/05/Javascript.gif";
}
function ChangeSize(){
var img = document.getElementById('myImage');
img.height = "80";
img.width = "40";
}
</script>
<p>
<center>
<input type="button" onclick="ChangeImageSrc()" value="Change Image Src"/>
<input type="button" onclick="ButtonClick()" value="Test Button Click"/>
<input type="button" onclick="ChangeSize()" value="Change Size"/>
<img id="myImage" src="http://www.mmncs.com/wp-content/uploads/javascript_logo.gif" onclick="ImageClick()"/>
</center>
</p>
<p><center><button style="background:url('Login_Button.png');width:86px;height:45px" onclick="DeadTest()"></button></p>
<div><img id="img1" style="visibility:hidden" src="a3.jpg" width="768" height="1280" /></div>
<script>
function DeadTest(){
document.getElementById('img1').style.visibility='visible';
}
</script>
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>