recently I come accross to a very nice responcive javascript what I would like to implement myself. You can see an example in here:
http://themes.iki-bir.com/alphine-wp/#! (by pressing on any of the thumbnails). Sorting the thumbnails is really an old trick, but to see extra content is something new for me.
As I am new to javascript maybe anybody knows any tutorials or lessons on this? thanks in advance!
This is "Isotope" - demos and tutorials here: http://isotope.metafizzy.co/
I thought you wanted to know how to do the sorting, because everything else is very simple :) if you could tell me how this sorting-trick-works/link, I'll give you my best explanation of the others :)
The More Content part, could be implemented by pure css, without any javascript. with this structure;
<div class="thumb">
<div class="img"></div>
<div class="content"></div>
</div>
and have this css present;
.thumb{
display:block;
width:100px;
height:100px;
}
.thumb div{
position:absolute;
width:inherit;
height:inherit;
}
.thumb div.content{
opacity:0;
}
.thumb:hover div.content{
opacity:1;
}
or you could listen to the ´onMouseOver´ event as soon as mouse enters. for the other part of loading the full description, listen to the ´onClick´ event and grab the information threw xhr.
Hide a div below each row of thumbnails. Change the content on the thumbnails onclick event handler. When the content has changed, make use of jQuerys slidetoggle: http://api.jquery.com/slideToggle/
At least thats how i would do it. Let me know if you want me to elaborate
Some example code:
$(function(){
$('.thumbnail').click(function(){
var $this = $(this);
var $divToShow = $this.nextUntil('div.container');
//fetch the divs content via ajax or however u want to do it here...
$divToShow.stop(true, true).slideToggle();
});
});
I would try http://api.jquery.com/slideDown/ for the very basics...
after that... it's just a mix of imagination and good taste :)
There's a lot of doc on jquery site... http://docs.jquery.com/UI/Effects/Slide
If you don't want to use a library like jQuery the easiest way to do it is to add divs with overflow hidden, position absolute and height 0 under each row and just expand them on onclick.
Related
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I really like in this example http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/ how the images expand on hover. I know how I could do this with jquery but I also know it wouldn't be as fast and reliable. I could give it a try with d3js but I am really new to it, any idea where I could start or other viable alternatives?
thanks
Try this:
html:
<div style = "display:inline;" id = "imgBar">
</div>
css:
#imgBar{
//CSS here
}
#imgBar > img:hover{
width:200px; //Just set the width to double it's default value
height:200px; //Same as above; 200px is just a dummy value
}
Then, you can add images to the div with javascript.
Good Luck!
On certain websites, when a link such as "read more" is clicked, a popup box will appear, and the behind webpage will often darken. The popup box then contains information and can be closed by clicking a button in the corner.
I'd like to make several of them. Would I do so simply by creating a div and pehaps another one with a transparency to "darken" the webpage behind the popup or is there a code I could use in javascript?
Generally people here are suggesting lightboxes, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css files and .js files, when your problem could be solved via CSS and JS.
Check out this fiddle: http://jsfiddle.net/3vmL6/1/
In your code you have a a simple div of a class modal-dialog, which is automatically hidden in the css (see the fiddle).
<div id="info-modal" class="modal-dialog">
<div>
x
<h2>Hello!</h2>
<p>You can display any information you want here!</p>
</div>
A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique divs using different ID's, but all belonging to the same class.
$("#click-me").click(function () {
$.ajax({
success: function (data) {
console.log(data);
$('#info-modal').addClass("show");
},
async: true
});
});
$(".modal-dialog .close").click(function(){
$(this).closest(".modal-dialog").removeClass("show");
});
If you're doing it yourself, you'd put an overlay over the entire page and give it a high z-index so that it will cover all of your dom elements. Then have a div, with a higher z-index positioned where you need it to be with the content you want.
An easier approach is to use a library that already has that functionality baked in
jQuery UI dialog - http://jqueryui.com/dialog/
bootstrap modal - http://getbootstrap.com/javascript/#modals
I believe this is what you are looking for: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
What you are looking for is a lightbox/modal box. I recommand Magnific Popup because it works with responsive design, but colorbox is also very good.
You essentially are looking to work with modals so. Zurb provide a library to do just this for you in foundation. The library is called reveal. It's simple to use. I use it a good bit. You can see it here. Hope that helps.
http://zurb.com/playground/reveal-modal-plugin
This code should do what your asking for
window.onload = function() {
document.getElementById("member").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
<div id="overlay">
</div>
<div id="popup">
your readme text in here
</div>
#overlay
{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup
{
display:none;
position:fixed;
left:40%;
top:40%;
width:600px;
height:500px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
they are called modals or dialogs, there are several frameworks that will help you in this case.
one of the most popular is bootstrap
http://getbootstrap.com/
I am trying to display a number of images on the same line without wrapping down. I have tried just about everything I know to make this work with no luck! I am trying to make an image selector for a slideshow that will be loaded into the page with ajax / jQuery and I don't want it to take up a ton of screen realestate. Ideally I want to be able to scroll horizontally and select my images.
<script type="text/javascript">
$(document).ready(function () {
test();
});
function test(){
for (var i=0; i < images.length; i++) {
$("#test").append("<img src='"+images[i]+"' style='width:250px; height: 250px; margin:10px; display:inline'/>");
};
}
</script>
<div id="test"></div>
Usually I have 0 issues with HTML so I feel kind of silly for asking and I'm sure it's a very simple mistake I am making. Any help would be greatly appreciated!
Try applying nowrap to div#test:
#test{ white-space:nowrap; }
You may also need another wrapper around div#test with overflow:auto; then if you want the horizontal scroll.
Try float:left in the images or try to wrap the images in a div and then try float:left
Try float:left in the <img> tags style. If it doesn't help, try changing display:inline to display:inline-block.
try float:left on images
and I see that you haven't declared the images array(hope you have in your original code)
I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:
<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">
<div style="position:fixed; top:50%; left:0; width:100%;">
<div style="height:150px; width:300px; margin:auto;">
<div>Processing</div>
<div>
<p id="dialog">Please Wait...</p>
</div>
</div>
</div>
</div>
Note I am calling:
$('#modal').show("fast");
before trying to add content to it.
Then I try to add to the dialog paragraph like so:
$.post(
'processor.php',
queryString,
function(data){
alert('data:'+data);
$('#dialog').html(data);
}
)
It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.
Anyone know why this is not working? or have a fix?
P.s. I know I should move my styles to a style sheet, I usually do that at the end.
Update
I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.
Also I am calling this in document.ready
You can see the page here click the submit button on the very bottom to see it happen.
update2
This is working correctly in FF and IE, its only not working in chrome.
if you view the console log, the text is there. try add css to the dialog something like :
#dialog { display:block; width:auto; height:auto;}
$(document).ready(function() {
// do stuff when DOM is ready
//Is your code called inside here or after this function is executed?
//If not, it should be.
});
Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:
$('#mydialog').hide("slow",function(){
$('#mydialog').html(data);
$('#mydialog').show("slow");
});
It doesn't look very elegant tho. I would prefer a better fix if someone has one.
edit:
A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.