I am using https://github.com/nigma/jquery-expandme plugin in for my page, here is the example
Everytime when you click the bottom grey area, the background image expands to full, and click the grey area again, it collapses to the top part of the image.
This is what I'd like to achieve:
I'd like to keep the up and down arrow function as it is, and to make the click happen on the image itself as well so it is easy for people to use.
1) The down arrow should still show on the bottom when it is the top part of image, so you can either click on the image itself or the down arrow to expand.
2) After it expands to full image, the up arrow should show down the bottom. So you can either click on the image or the up arrow to collapse it to the top image.
I have been trying for a while, but no success. Can some please point me to the right direction?
Thank you,
S:)
EDIT : i think i got it wrong the first time ..
Edit : please follow the link below .
https://github.com/codeiz/jquery-expandme
i have updated the plugin and now it allows more than one controller
but now you have to pass an array as an argument please look at the documentation
I think you can change this expandToggleClass to "exmandme" :
// Class added to expanded element
expandToggleClass: 'expand-toggle', // Class for anchor element that triggers
Related
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Supposing the image which is being displayed at the moment is pic1 and that you have pic2, pic3, pic4 as well.
First you need to create an array in javascript containing the location of these files. Now assuming that the id of that image is "mainpic".
var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
documnet.getElementById("mainpic").src=++window.currentpic%window.l;
}
function changeleft(){
document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
}
Now for the html part you need too superimpose these signs-
<> which you can do by using position:absolute and z index:-1. You can find the examples on w3school.
It should be something like
<aaaaaaa
And in css
enter code here
#superimpose{
position:absolute/relative;
top:100px//or some other value to move the text over the pic or use "left" and "right"
}
You could use slick, I used it at work and it is really good.
I am having trouble with adding a little "V" arrow to a expanding div on my page.
I want to to sit on the border of the div and go down when the div expands (and possibly turn around into a "^" arrow)
But I have no idea how to get it to float ontop of the border, could anybody please help me or tell me how to tackle this problem?
Page: http://www.trulyscience.com/test/ (The question thing on the bottom right)
Code: http://jsfiddle.net/tJugd/1070/
I got a arrow at the bottom now, so the top one can also disappear when the div opens, but no idea if that is simpler :P
*updated tags
I would do it a slightly different way. I would use the same div when open and closed, but change the class so that a different icon would appear.
Here we go: http://jsfiddle.net/tJugd/1091/
Is this what you were meaning? Let me know if not.
EDIT - Just updated the demo to put the arrow in the center!
FINAL EDIT - added extra css and html to place arrow in white container div
My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.
Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside
You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.
look I have this question, how can i do something like this (look at images)
I think it's possible to do with jQuery or ajax, but i don't know how..
i have page something like this :
when i click on 1st green cube slides up one #div container at the bottom of page :
when i click on red 1st cude #div container at the bottom of page slides down :
but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.
I hope so you will help me with this..
And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.
I don't know if this is exactly what you need, but I did a quick solution in this fiddle:
http://jsfiddle.net/8Z66Y/3/
If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.
If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else
You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.
like:
$("first").click(function(){
$("second").hide();
$("first").toggle();
});
$("second").click(function(){
$("first").hide();
$("second").toggle();
});
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.