Adding bullet-like buttons to scrolling slideshow - javascript

So I want to add bullet-like buttons at the bottom of the slideshow, but I can't find a tutorial, so thought you guys could help me out. Here is an example: http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/index.html

Use a CSS background on your links:
...
CSS:
.someClass {
background-image:url(/images/...); <--path to your image
background-repeat:no-repeat;
display:block;
height:20px;
width:20px; <--- set sizes to match your image.
}

Related

blueimp Gallery borderless thumbnails

I am using blueimp Gallery on my site, but my thumbnails are shown with a white border. The live demo is shown with borderless, what should i change and where? I tried to make thumbnails with the same size as on the demo (86x86px), but doesn't solve my problem. I checked all the css's but didn't found the corresponding class/id.
The live versions gallery (bottom of the page).
http://theprob.wha.la/sample/ <- Uploaded a simple version of my site here!
You can add float:left; to a element inside #link1.
#links1 a
{
float:left;
}
Or use display:inline-block; and don't forget to remove space which is occurred by display:inline-block;
#links1 a
{
display:inline-block;
vertical-align:middle;
}

Div aligning right and changing x location depending on other Divs on the right side

Overall I would like to have something like this jsfiddle.net/DSghU/
Just that the the whole thing is not sliding out to the left. It shall slide out to the right. So that by clicking on the button the button is going completely to the right side.
Edit
I was able to solve the first question: jsfiddle.net/kwoxer/7hne1d0b/
But now I'm looking for a small fix on that. I really dislike that the text is braking when toggled out. How can I set it so that the text is not braking?
Edit 2
The current solution is already cool. But there is just another small issue with the other content. It's moving to the bottom. So how can these toggle elements really be just like an overlay. Here an example: jsfiddle.net/kwoxer/7hne1d0b/4/ I want that the other text(on the left) is staying as it is. And image there is a SVG instead!
Edit 3
Found it out. You need another inner div: jsfiddle.net/kwoxer/7hne1d0b/5/ But I don't think that's a cool solution for this right? If someone finds out something way better, please let me know.
Is this correct. Please have a look at following fiddle:
http://jsfiddle.net/zxwo3ack/16/
basically I just added a few things to the css
#myDiv {
position:relative;
top:50px;
color:Green;
background-color:#eee;
border:2px solid #333;
text-align:justify;
float:right;
width:200px;
overflow:hidden;
}
#button{
position: absolute;
top:80px;
right:0px;
float:right;
}
.other_details{
position:relative;
top:50px;
float:right;
font-weight:bold;
width:200px;
border:1px solid black;
padding:5px;
margin-left:2px;
}
In order to achieve your goal you will need to animate either left position or margin-left. In both cases respectic div should be wrapped with one more container with overflow: hidden on it.
var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";
if (!$("#myDiv").is(":visible")) {
$("#myDiv").show();
}
$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
if ($(this).css("margin-left") == "200px") {
$(this).hide();
} else {
$(this).show();
}
});
Demo: http://jsfiddle.net/7hne1d0b/3/
Solution was pretty simple. Just a bit of CSS needed to be changed and the order and elements in the HTML edited.
This is what I wanted to have: jsfiddle.net/kwoxer/7hne1d0b/2/

Toggle menu with Jquery not working

I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:
<script>
$(document).ready(function(){
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
});
</script>
Also used the following css:
#block-38 .menu{
position:fixed;
top:0;
right:0;
width:250px;
overflow:hidden;
z-index:999999;
}
There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.
Advised user to combine scripts and it worked!
:)
Additional help as per comment:
A few things need to be done to assist with this.
1) In your css add this:
#block38 .nav-vertical.active {
rgba(0,0,0,.5);
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
}
#whitewrap.notactive {
margin-left:-235px;
}
2) Change your jquery from
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
});
to:
$("#block-37").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});
You need to add in another button once the menu is open so that the user can close it.
To do the cross:
Make an image or div and give it the class of "closeNav".
Then change your jquery:
$("#block-37, .closeNav").click(function(){
$("#block-38 .menu").toggle();
$("#block38 .nav-vertical").toggleClass("active");
$("#whitewrap").toggleClass("notactive");
});

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.
Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

CSS to Expand, Hide Content on Hover

Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/

Categories

Resources