I am looking for a method/trick to DISABLE (not just hide) a horizontal scroll bar. I have search all over and all I have found was "overflow-x:hidden". The issue with that is i have to drag an element from one div to another
im working on a jquery ui based page where a user can drag a div from one container to another container. the first side is dynamically populated with divs from the database. I need verticle scrolling because it's a dynamically populated list, but with horizontal scrolling enable it prevents the divs from being able to be dragged over to the droppable area.
You haven't said, so I will assume you are using jQuery to do dragging. In the jQuery docs on Draggable, there is an option called 'scroll'. If you set it to false, draggable objects will not scroll the window.
This is a fairly common problem. Have a look at this page. It describes a workaround To this problem by appending the draggable to a different element ondragstart and reappending it to its original container ondragend.
Related
Need a script for my html page that helps me do the following: When i click on a text_head1 a list of lines scroll down, when i click on other text_head2 the last list scroll up and the new list scroll down!
Basically what you need is pure javascript/jQuery.
If you're using jQuery, you can catch the click on your "text_head" element.
Then you add it a class "active" for example and use a function to display the list under the element (like show() or slideDown()).
Then on your next click, you'll search for the class "active" on your "text_head" elements.
If there is one, you can hide the list (hide() or slideUp()), and display the list under the clicked element.
Perhaps what you want is called "accordion". It exists in many UI packages, like jQuery UI: http://jqueryui.com/accordion/
What you are looking for is an accordion effect. A simple google query like Javascript accordion will get you started
I have a design as show in the below image and i have a requirement where user can click on the link in Rectangular area named as A, B & C. When one click on the click here link in Box B then all the green area should gray out except the BOX B and same should happen with BOX A, C.
Example as shown in image.
When User open the page
When User Click on the BOX B link
I am not sure if this is possible if there is any similar example where i can start from. I looked for but could not find similar example. Usually they example are related to whole page grey-out.
I can do same by using onmouseover and replace the whole image with the another image which has surrounding area in grey. But i am not allowed to do it this way. I am not sure if this is possible. I would appreciate if you can point me in right direction or if this is possible to certain area of page in grey..
These page are designed for PHP scripting
I created a little example for you, which you can find here:
http://jsfiddle.net/Srj82/
Its' basically using a simple css z-index to overlap / hide the entire place, while the current selected element got temporarily a higher z-index than the overlapping <div>.
You'll notice, while the overlapping <div> is visible, you can still click on the selected box. Anything else is not reachable (without removing event handlers or so). Just because there is another element which overlaps the rest.
On click of A/B/C you can add a div overlay with a transparent grey bg color and increase the z-index of the clicked element higher than the overlay.
Use an overlay div that will be positioned absolutely above anything else on your page with z-index then set your clicked box's z-index to overlay's + 1.
There are a couple of ways to do this, but a relatively quick and easy way is to make the elements that you need to grey out be of the same class. Then when you select an item give that element an additional class, and change the css for the elements named above except for the selected element with the additional class.
This is a link describing one way to accomplish this.
You could try to place an div over the area where A,B,C are placed.
In this div you will have a background-color like so :
#myDivHider{
background-color:rgba(0,0,0,0.4);
display:none;
}
When you either click a,b or c You "activate" (display:block), the whole thing and set the z.index of your a,b or C that it get's up "higher".
An alternative would be a plugin from jQueryTools, called Expose.
http://jquerytools.org/demos/toolbox/expose/index.html
One way to do it would be to temporarily change positioning of the element to absolute and give it a high z-index, then add a layer below it that would act as the overlay.
You could also use a plugin, for example this one: http://jquerytools.github.io/documentation/toolbox/expose.html
I am trying to code this from scratch, so that when a button clicked it makes an options div appear on top of the existing div without displacing it's original position. This picture illustrates the concept:
http://i.stack.imgur.com/lxL4r.jpg
I have put an 'onclick' command on the button so that the javascript below is executed upon clicking the button
xmlObj.open ('GET', '/ajax?action=editbox', true);
xmlObj.send ('');
I have omitted the rest of the code prior to this point as it's standard stuff.
This is where I am now completely stuck. I want to now have code in a php file called 'editbox.php' which tells the webpage to make the options div in the picture appear on top of the orignal div (without displacing the position of the original div).
I would appreciate any tips or guidance very much.
This seems like more of an HTML/CSS question; there's no clear reason (at least, not from the phrasing of the question) to use PHP to accomplish this. Your options div might as well be present in the DOM from the time your page is first loaded, but with its CSS display set to none. Give the button and the parent div position: relative then style the button and the options div to be positioned absolutely to the upper right corner of the parent. Make sure the button and the options div are the last children of that parent box, and that they're in that order, so the z-index will naturally occur the way you want them to. In the button's onclick, set the options div to display: block.
I am building my portfolio and I want to create a gallery to display my projects. I have a selection of seven divs containing content that form a tabbed navigation-esque section of my website. As with other tabbed navigations, only one div containing content will be active at any one time. However, unlike other tabbed navigations, this one is controlled by PHP. If certain content (currently set to a file_exists function but will soon be MySQL controlled) is available, the div will be written into the navigation and the appropriate link will be displayed. If it is not, then the link will be hidden and the div will not be written. The files required are based on a $_GET call, and the files required vary depending on the string inside my $_GET variable.
Each tab has a unique id. Currently (since I am no Javascript expert), I have a "reset" option that sets the style of all named divs to a "hidden" style, before bringing my chosen div to a "visible" state.
What I want to do, if it is possible, is this:
I want to go from #div1 to #div2. Divs 1, 2, 4 and 6 (for this example) are active. I click the link that tells my page to display #div2 (the function currently only says to hide ALL divs and then display #div2, the hiding of all other divs is a separate function, which is called within this function). #div1 is currently visible.
#div1 will fade out
#div2 will fade in
Divs 4 and 6 will not be affected. Divs 3, 5 and 7 will not be touched since they (as far as my page is concerned) do not exist. Each fade can take 3 seconds for this example.
I am vaguely aware that $('#div2').fadeIn(3000); would constitute a fade in effect for #div2 and the fadeOut() counterpart would constitute a fade out. How do I use jQuery (I have 1.5.2 on my site) to fade #div1 out and fade #div2 in WITHOUT affecting any other div, or is it easier to keep the code as it is where it hides all of my divs and just fade #div2 in? Please remember, I am not a Javascript expert, I'm barely a beginner, so please do not insult the length of my script or my inability to understand something which I guess would be so simple.
Please remember that I have up to seven divs in my navigation. The script must find the div that is visible based on the link that is clicked and fade it out, then fade in my chosen div, and it must not touch any of the remaining divs.
Is that easy enough to understand and gain an answer?
EDIT # 01:46 GMT, 30/04/2010
Thanks, but these don't look like what I want. They look like they would work if there were only two divs, but remember, there are up to seven, and the link should know which div is visible and which are not accounted for.
I currently have my PHP script to say "If this file exists, then make this div and apply the style 'visibleTab' to it. Otherwise, make it, but apply the style 'hiddenTab' to it." My Javascript (now jQuery) code is as follows:
function resetTabs() {
$("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
}
function showTab(tabname) {
resetTabs();
$('#'+tabname).fadeIn(3000);
$("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
}
The principle is this:
My link has an onclick that calls my showTab function and places the appropriate div id inside the function, so for example:
Link
The function hides all of the divs and then fades in the one called by 'tabname', in this case, "mobileapp".
I have told each reset function to remove any class called 'hiddenTab' as well as any class called 'visibleTab' and 'tabs' before adding the 'hiddenTab' class as a kind of "fail safe" approach. I have also told my showTab function to explicitly remove the "hiddenTab" class from my tab that I want visible and to add the classes "tabs" and "visibleTab". I forget why I have two styles, but i am sure the reason will come to me.
I want my jQuery script to know which div is visible and which one is not out of the selection of seven. The #div1 and #div2 was an example, but it could be any div from the selection. Before, when I used the document.getElementById function, it worked perfectly, I just wanted to add a fade on to the script to make it look better. Now, it works, but only when I cycle through the divs once. Afterwards, it just appends my div underneath the visible one, it doesn't hide them. I know I have missed something, or I have messed up somewhere, but what have I missed? Where have I messed up?
While not set up in tabs hopefully this jsfiddle example will help you a bit. [Edit, added total 4 divs now, wait for animation to finish before clicking the next button]
Basically it searches the container div for an element that is visible using the :visible selector
The .eq(0) says to only grab the first visible element out of the collection the selector returns. If there are no visible elements it just selects the first element.
Then it selects the id to show.
Calls out both animations at the same time with:
vis.fadeOut(speed);
next.fadeIn(speed);
If you want to wait for one to fade out before fading the next in use the callback mentioned in the other answers.
This works fine on all new-ish browsers but chokes a bit on IE7 or less.
Alternatively you can get a collection of hidden elements with :hidden
If you want a more direct example you can post your html so that we could help with the exact selectors that are best suited.
Maybe this is what you want?
$('#div1').fadeOut('3000', function() {
$('#div2').fadeIn();
});
When you call the any of the jQuery effect functions, one of the parameters is a callback function which is called when the animation is complete. You simply need to do something like this
$("#div1").fadeOut(1000, function(){
$("#div2").fadeIn(1000);
});
Here is a walkthough
$("#div1").fadeOut(1000, function(){
This says that when the div with an id of "div1" will face out for 1000 milliseconds (1 second) and after it will call the function.
$("#div2").fadeIn(1000);
This simply makes you new idea fade in after the other one has completely finished fading out.
});
Simply closes up everything that we opened.
I think what you are worried about is that
$("div").fadeOut(1000);
Would fade out all divs on the page but putting a hash mark and an id you can identify a specific one my it's id like "#div1"
Also, you set it with the id attribute:
<div id = "div1"></div>
I found this jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig - http://bit.ly/NgLRdb give it a look, seems pretty useful....
currently trying to put it as a module on my joomla site
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});
This code will work as button clicks which will fade out div1 and then slowly fade in an another div as div2.
Is there a way I can have collapsible list and have the clicked list expand when clicked and stay expanded even when the page refreshes?
I'm using PHP, CSS and Jquery
This is called an accordion, and there is one in jQuery UI : http://docs.jquery.com/UI/Accordion