I have four different buttons on a page, each sitting under product description that relates to that button. These buttons are for the users to click their favorite product. When they click one button, it would be preferred for the other three buttons to be given an overlay, or other visual that makes it look like they were disabled from being chosen. Is there a simple way of doing this?? Maybe with CSS or javascript?
I am new to Javascript and would appreciate any help!! Thanks!
Edited 12/18/14:
My apologies, let me add some code.
HTML:
<div id="blue-btn-grades">THIS IS MY FAVE</div>
CSS: I have media queries so CSS may be different for specific resolution but below CSS is for my 17" computer monitor.
#blue-btn-grades {
font-family: BigNoodle;
font-size: 18px;
color: #ffffff;
background-color: #3095b4;
margin-left: auto;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 40px;
border-radius: 5px;
width: 90px;
display: inline-block;
}
Please let me know if you need anything else!
Update: 2/18/14 -
In my original post, I said button but more specifically, I would prefer this overlay to be applied to the entire div. The HTML for one div is below:
<a name="grades"><div class="col-lg-3" align="center"><img src="images/golden.png" /><br /><h5>Golden with Delicate Taste</h5><h6>Usually made at the beginning of the new maple season. Pour over vanilla ice cream for a Vermont maple sundae, sometimes called the Sugarmakers’ Favorite Dessert.</h6><div id="blue-btn-grades">THIS IS MY FAVE</div><div id="teal-btn-grades">BUY ME SOME!</div></div></a>
Thanks again everyone. I need to learn javascript...
With jQuery, and no CSS...
Demo: http://jsfiddle.net/pbQGP/1/
HTML:
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
JS:
$("button").on('click', function(){
$("button").not(this).attr({disabled: "disabled"})
})
Related
Here's the thing :
The page already has a png of the seating map of theatres, each seat layout in black lines.
what I want to do: allocate a square button to each seat, so that when u press the button it will depict a picture of the view from that particular seat.
so following questions :
what can I do to allocate a button to each seat? Do I give the buttons a corresponding grid value?
Heres a reference for u to visualise...
https://www.lgart.com/uipage/guide/seat.aspx
Its in Korean but u'll get the hang of it once u see it.
Also disclaimer: I'm a newbie at Javascript so I may be struggling with the easiest problems...
If you're trying to overlay these buttons over a PNG image, you'll probably end up needing to use some sort of image map. However, my suggestion in this case, which is a more modern way of accomplishing a task like this would be to put together an SVG version of the seating chart, where each seat shape/path in the SVG would have its own unique id. That way, you can set up an event listener in your JavaScript for any seat click and trigger any actions you'd like.
Here's a similar mini-project I built a while back to explore this concept, using the United States map. In my example below, I actually used checkbox inputs to track the checked status of any given state, but I would suggest for your case to just set up the event listener and add custom classes to your seat shapes/paths if you need any custom styling when the seat is selected.
https://cdpn.io/e/MWWLVqw
**Make sure to open this snippet as a "Full Page" to see the map
html, body { margin: 0 !important; padding: 0 !important; height: 100%; overflow: hidden; } iframe { width: 100vw; height: 100vh; }
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="brandonmcconnell" data-slug-hash="MWWLVqw" data-editable="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Interactive / Selectable Map">
<span>See the Pen <a href="https://codepen.io/brandonmcconnell/pen/MWWLVqw">
Interactive / Selectable Map</a> by Brandon McConnell (#brandonmcconnell)
on CodePen.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
I'm trying to add a close button to Elfinder. I'd like the placement to be to the right of the search box where close buttons usually are.
After the elfinder init, I do this:
$('.elfinder-toolbar').prepend('<a class="elfclose"><div class="elfclose-bg">×</div></a>');
The Css:
.elfclose {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
text-decoration: none;
float: right;
}
$().prepend should put the elfclose div as the first element under the toolbar, but the search box is always first.
I believe it's caused by Elfinder prepending after me... Is there a way I can say do this after the other div exists?
Just FYI, I did figure this one out...
The search box is added by Jquery after init, so you have to put a delay after the prepend. I tried checking for the existence of the search div (which would be better), but it turned out to be too much work. No one's going to notice a .2 second delay. To paraphrase Larry Wall, your code is correct if it gets the job done before your boss fires you.
I'm in Angular, hence the $compile directive:
var close = $compile('<a class="elfclose" ng-click="closeFileBrowser()">
<div class="elfclose-bg">×</div></a>')($scope);
$timeout(function(){$('.elfinder-toolbar').prepend(close);}, 200);
I'm trying to have two buttons side by side, one with an image, one with text.
I can't figure out why they don't line up correctly on the baseline.
Here's the code:
<head>
<style type="text/css">
button {
height: 20px;
}
</style>
</head>
<body>
<button id="image-button">Some text
<img src="http://www.famfamfam.com/lab/icons/mini/icons/application_firefox.gif">
</button>
<button id="text-button">Some text</button>
</body>
I'd love a solution to this, but I'd also love to understand the "why" of this behavior, since it is consistent on all browsers.
Also, I've tried "float: left" on the image, but that doesn't work on Chrome.
Add vertical-align: top
button {
height: 20px;
vertical-align: top
}
Check this JSFiddle
Your problem is two things, one the image is bumping up the line height of that text since it's displaying inline. And two, browsers don't support vertical-align consistently. Looking at the previous answers, some of them work in Chrome, but not in Firefox.
My best solution - that works in all the browsers I test in - is to redefine how the image is treated and make it a block element, then float it to the right of the text. That way the image does not affect the way the text is aligned. The downside to this is that you then need to define an absolute width for the button to make sure the image isn't wrapped to the line below the text. Here's the CSS for that:
button {
height: 20px;
width: 100px;
}
img {
display: block;
float: right;
}
Working fiddle
Another solution is to use a background-image on the button instead of an img tag, but then you'll need to define a padding on the right side of that button to make room for the image. But then you lose the default styling that the browser places on the button, so you're going to have to deal with that.
The text and the image are lining up on the bottom, but being pushed down by the size of the image. Try setting vertical-align: Text-top
More details: http://css-tricks.com/what-is-vertical-align/
You can fix this using line-height:
button {
height: 40px;
line-height: 40px;
}
There is a fiddle here: http://jsfiddle.net/txdMZ/
I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?
You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.
Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.
I am working on a new site and wanted to figure out how Apple and IBM did a slider on their website.
Examples:
http://www.ibm.com/us/en/sandbox/ver2/ and
http://www.apple.com/imac/
Notice the way the text and images slide in opposite directions. It appears they do it with CSS3, yet I can't figure out how they get the onclick of the buttons below, to work without swapping out classes.
Can anyone provide some insight?
Specifically looking at the Apple slider there is a couple of things going on.
They are using JS to hook into the click event and when they do that, they are changing an attribute on the <ul>, this in-turn changes the CSS, which, using CSS3 transitions, provides the animation.
So having a look into the code:
Here is a snippet of the HTML code. You can see the exited and entered attributes. These are changes using javascript when a new section is required (via the onclick)
<ul class="ul-slider" page="1" style="width: 970px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; " exited="previous">
<li class="pb-macbook" exited="previous">...</li>
<li class="pb-macbookpro" exited="previous">...</li>
...
</ul>
...
<ul class="ul-slider" page="3" style="width: 930px; margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 25px; " entered="next">
<li class="pb-keyboard started" entered="next">...</li>
<li class="pb-magicmouse started" entered="next">...</li>
<li class="pb-magictrackpad started" entered="next">...</li>
...
</ul>
Then, looking into the CSS (http://images.apple.com/global/styles/productbrowser.css), we see a number of CSS3 transition/transforms properties and styles
a small snippet is provided, you can see how the different entered or exited attribute values effect the transforms, which in turn are animated by the transitions.
.productbrowser ul.exited ,
.productbrowser ul[exited] { display:none; }
.productbrowser li[exited] ,
.productbrowser li[toenter] { -webkit-animation-name:none; -webkit-animation-duration:0;
.productbrowser li[exited="next"] ,
.productbrowser li[toenter="next"],
.productbrowser li[enter="next"] { -webkit-transform:translate3d( 3000px, 0, 0); }
They minified the JS so I can't really show you how thats working, but it's not too complex.
I hope this make sense and is helpful :)
There are many JQuery javascripts available on internet so you can implement this type of slider using it. And ya JQuery has plenty of them.
You can also acquire this type of thing using javascript files.
You can visit Menus & Navigation of Dynamic Drive for more information. You can also get the source by which you can find out the thing you are searching for..