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
Related
I have this image where i have placed small divs above it. when a user click on a div the color of the div changes from blue to red and inserts a value to database with the div id.
My questions are
How shall i retain the color of the div after clicked when the page gets refresh. I can call the database and check for each divs but somehow i felt it is not the best method
I have set position:absolute;left:80px;top:21px; for each divs. I want to know is there any other better method to this as I have to make one more image with same functionality for every user
Please help me to find a solution
[1]: http://i.stack.imgur.com/Hhdstrong textzi.png
thanking you all in advance
I have not been allowed to add image here so temporarily i am sharing the image from my local system
To change color when clicked
<div onclick="changeColor()" id="demo">
function changeColor(){
document.getElementById("demo").style.background="red";
}
Colors can be stored in the database
That is the only real solution (storing and retrieving values) if you want to save the selected value for a period of time; it will also accommodate a refresh.
This is a fine solution, but it forces you to calculate the position for each new user if I understand correctly. You may consider floating container divs and positioning the absolute divs inside them accordingly.
I hope my question isn't confusing anyone. I don't know what exactly is that sort of text box called :(
What I am looking for is to create a HTML text box that has different menus at its top i.e. the dimensions of the text box remains the same but each menu heading in the text box would have some text under it, that would open when a user clicks it.
Let me show you the demo:
http://www.e-conservationline.com/content/view/28/113/
Scroll down a bit on the page and have a look at GENERAL RULES OF SUBMISSION:
having menus like Language, Word limit, copyright etc
How can I create a similar type of text box, which I fill with text for each heading menu?
You should use some Javascript solution to achieve this goal. For instance, JQuery UI has a tabs feature.
For the same height, a little bit of CSS will satisfy you! ;)
Each "textbox" has a button (by the way its not textbox, it's a div). For example
div #1 has button 1
div #2 has button 2
... so on
Only a div is shown at the time. When user click on a button, it show a div related to that button and hide all the rest. That's how it works
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 any method to expand/collapse the grid by clicking on the caption layer?
I have 3 very large tables that are displayed on a 1680x1050 screen which are loaded by default, collapsed, and each time the user wants to expand/collapse a table, he has to click on the expand/collapse button of the caption layer, which is "very far" positioned.
You can use construct like
$(".ui-jqgrid-titlebar-close",$("list")[0].grid.cDiv).click();
You can see live demo here.
UPDATED: Probably it will help you just to place the minimize element of from the capture bar on the left size instead of default right position? You can do this with
.ui-jqgrid .ui-jqgrid-titlebar-close {position:relative;top:auto;margin:0;float:left}
see updated demo here.
UPDATED 2: See also one more example where click on the whole grid capture follows to the expand/collapse the grid.
This one will work for all the grids on the page.
$(".ui-jqgrid-titlebar").click(function() {
$(".ui-jqgrid-titlebar-close", this).click();
});
I mean,to click on the actual caption layer (the titlebar), the dark blue part from your table,where you put the text "How to expand /collapse grid on caption layer click" text and on the right side you have the small button to expand/collapse.
Is there something like :
onCaptionClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}
or
onTitleBarClick:function(state){$(".ui-jqgrid-titlebar-close",$("#id")[0].grid.cDiv).click();}
In the documentation there is an event for the Header of the grid onHeaderClick ,but there is nothing for the Caption layer that contains common information for the represented data.
Perfect that did the trick. Thank you a lot!
So, acording to Oleg to expand/collapse the entire table by clicking on the titlebar(caption layer) you can use:
$(myGrid[0].grid.cDiv).click(function() {
$(".ui-jqgrid-titlebar-close",this).click();
});
where myGrid is:
var myGrid = jQuery("#jquery_grid");