Please check this page first http://balipremiermanagement.com/
in that page, there is a slide show and a Logo at Top Left Corner. how to make jQuery Event when if the images/101130/logo_big.jpg Element CSS display:block then the logo (at top left corner) element CSS will change to display:none
or more simple, what i want to achieve is, when the slide show, show the Logo. the the logo at top left corner will dissapear.
How to do that with jQuery?
Thank you very much.
I'm not sure this question is relevant any longer as the website seems to have changed, but...
Apply .hide() to the element, or for an animation,
.hide( [duration] [, easing] [, callback] )
See the jQuery Documentation for Hide for details.
Related
I'm working on a website and was looking for a function that lets me hover a div to scroll right inside another div, like this example:
See: http://jsfiddle.net/s17L50pv/1/
Imagine that the arrow > to the right is the div you hover and the content in #slider moves right, showing more books!
You need to use setInterval() and some events (mouseover and mouseout) to get this effect
See if that's what You are talking about - http://jsfiddle.net/s17L50pv/5/
I suggest you use a javascript carousel slider for this, there are tons of free scripts around, e.g:
http://kenwheeler.github.io/slick/
I have an HTML image of a mannequin. An image map defines body parts. I have two divs on top of the image map, one to show the hover selection and one to show the current (active part). The problem I have is: when a part is marked as 'active', I reposition the background on the 'active' layer to show a highlighted background image (a sprite map which uses a different colour. When the 'active' state i displayed, I can't click through it's transparent parts to select a different part.
One possible solution would be to use pointer-events, but I wanted to keep it as compatible as possible.
When i.e. a div has opacity:0; to make it transparent, it's still on top of other div's.
This way the div underneath won't be clickable.
This can be fixed by changing the display-mode of a div to hidden.
This way the div will be 'removed' and div's laying underneath will be clickable.
If you want to be able to click through transparent parts of an image, try using them as .PNG files.
-not sure if this might be helpful to you-
It's difficult to visualise the issue without being able to look at code or a diagram, but I've tried something in JSFiddle that may help.
In the example I've created, the 'hover' element starts off being unclickable where the 'active' element covers it (but is clickable where it is uncovered). After clicking the 'hover' element, its z-index property is altered so that it appears on top of the other elements. You can see it works because it is subsequently clickable everywhere.
Relevant jquery:
$( "#hover" ).css( "z-index", "2" );
I'm hoping this solution is helpful but, again, it's hard to tell if I've got the right idea without seeing a visual example of the original problem.
The idea behind this solution is you can rearrange the z-index values of elements upon clicks registering as many times as you need in order to make sure the relevant parts of the page are always clickable by the user.
I have a chat box that is resizable. It has
resize:both;overflow:auto
in the CSS. So at the bottom right of the div, there is a little arrow thing that you can click on and resize the div.
Is there another way to style this? I'd much rather be able to put the mouse on any corner of the div and resize it, or at least have that arrow be on the top right or top left of the div. I'd also like to be able to change what the arrow looks like, to make it more obvious what it does.
Also, is it possible to have the cursor change when the mouse is over the arrow?
Short answer: this is not possible.
However using javascript and CSS a custom solution can be made. You can place a little div in a corner using absolute positioning. Then have javascript resize the textbox on dragging the little div.
As you can see in JSFiddle I have slideout menu. I want to slide or animated left to the right opening "div" on my page center, when someone click menu buttons. I've already searched about that but always saw lightbox but I dont want it. By the way I cannot add JSFiddle link so I have to write it like that. h ttp://jsfiddle.net/ygzsmsk/4b2Zs/
Based on my understanding of your question, I've modified your code a bit.
I understood that you want the first div to move from left to right instead of just the menu.
You need to remove the position CSS attributes from internal elements and add the same to your parent div; in addition, you need to have your JS act on the parent div.
Have a look at this:
.cbp-spmenu-push {
left: -200px;
position: absolute;
}
http://jsfiddle.net/4b2Zs/1/
You can play around with the final arrangements as you see fit.
i have a question about html and css.
How can i make a sidebar like the one in Google FAQ page?
I mean, the sidebar that when you put the cursor over, an arrow appears and if you move the cursor, the arrow moves with it.
I hope you can help me, thanks!
From the looks of it, they are listening for an event (in this case when div#gd-collapsible is hovered over) and the class "hover" is added to it.
So you have that #gd-collapsible is about 3 pixels wide and and on hover, the class "hover" is added which has 1px border solid on left and right, and that's about it really.
You can do this via jQuery, just make sure you style the div#gd-collapsible in a way that it's height equals the one from the right side bar.