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();
});
Related
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
I want to make a one page website which is having left menu fixed and its contents on right side..
I want body background color different for different menus.. it should also work for scroll up and scroll down also...
And also as menu changes that menu should be highlighted...
http://mailchimp.com/2012/#!/section/
Please check this url. I want to make something same as in this site..
Is there any plugin to make this type of site???
Please reply as early as possible..
Thanks in advance...
You should listen for a click event on your menu items, and change the background-color for your body. You can store the color for each div in a data property:
$('.menu_item').on('click', function(){
var newColor = $(this).data('color');
$('body').css('background-color', newColor);
});
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
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.
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.