Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding ›  [ASP.Net] Hide div in C# behind the code and show it with Javascript
New Posts  All Forums:Forum Nav:

[ASP.Net] Hide div in C# behind the code and show it with Javascript

post #1 of 20
Thread Starter 
Hey guys, title almost says it all.


I have a div that is right in the middle of my screen that has to be hidden from user until he clicks a link.
Now how I got it working is, on document.ready, --> hide()

It works just fine, but it still flashes before the page is fully loaded(Until javascript document.ready kicks in).

I would like to be able to hide the said div with c# so that it never appears unless he clicks the link, on the link click : I'd like to use javascript to Show() the div.


Is this even possible ? I would appreciate help please !
post #2 of 20
Why don't you just start off with the div hidden in the CSS and use JS to show it?

Use visibility:hidden if you want to hide the element but preserve the empty space behind it.
Use display:none to completely take it out as if it's not there at all.

From there, just use JS to change it to display:inline, block, etc.
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #3 of 20
Thread Starter 
It would work if I wouldn't want that div to slide like this :
Code:
$("#informations").show('slide', { direction: 'right' }, 500);

The show function with css hidden doesn't work frown.gif

Display:none is not working either.

I use Jquery to hide show the div which slides in the middle of the screen.
I would love to have it hidden, and on click start the Jquery but none of the 2 options are working frown.gif
Edited by Abs.exe - 4/5/12 at 11:10am
post #4 of 20
Quote:
Originally Posted by Abs.exe View Post

It would work if I wouldn't want that div to slide like this :
Code:
$("#informations").show('slide', { direction: 'right' }, 500);
The show function with css hidden doesn't work frown.gif
trying display:none now.
Code:
if ($("#informations").is(":hidden")) {
$("#informations").show('slide', { direction: 'right' }, 500);
}
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #5 of 20
Thread Starter 
Quote:
Originally Posted by Plex View Post

Code:
if ($("#informations").is(":hidden")) {
$("#informations").show('slide', { direction: 'right' }, 500);
}

Nope, it looks like I would need to set it not hidden in css to work.
Right now it sets the div to hidden but the show slide just doesn't work anymore frown.gif
Edited by Abs.exe - 4/5/12 at 11:15am
post #6 of 20
Quote:
Originally Posted by Abs.exe View Post

Trying it thanks for our help biggrin.gif

No problem. smile.gif

Try that with "display:none" on the #informations element and let me know.
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #7 of 20
Thread Starter 
Quote:
Originally Posted by Abs.exe View Post

Nope, it looks like I would need to set it not hidden in css to work.
Right now it sets the div to hidden but the show slide just doesn't work anymore frown.gif
Quote:
Originally Posted by Plex View Post

No problem. smile.gif
Try that with "display:none" on the #informations element and let me know.

It does the same exact thing, nothing happens, like if the Show() function was bypassed by the css.
post #8 of 20
Quote:
Originally Posted by Abs.exe View Post

It does the same exact thing, nothing happens, like if the Show() function was bypassed by the css.

I would need to know what this function is that you're calling to help figure out why. I am familiar with the jQuery slide functions, if they're at all similar to what you're trying to use.

In that case, you would start with display:none.
Code:
<div style="display:none;" id="test">
<p>Yo bro.</p>
</div>

and then you would tie something to call this function:
Code:
if ($("#test").is(":hidden")) {
$("#test").slideDown("slow");
}
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #9 of 20
Threw that together for you real quick, feel free to look at the source. I'll leave it up for a while if it helps you at all.
Edited by Plex - 4/6/12 at 11:26am
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #10 of 20
Thread Starter 
Quote:
Originally Posted by Plex View Post

http://serpensa.com/
Threw that together for you real quick, feel free to look at the source. I'll leave it up for a while if it helps you at all.

I don't understand why mine is not working.

I have a floadting div on the right called Any questions ?
If someone has a question they click on it and my div (I'm asking questions about) scroll out of the Any Questions Div.


Here is what I'm using:
Code:
$("#Anyquestions").click(function () {
        if (visible == false) {
            $("#informations").show('slide', { direction: 'right' }, 500);            
            visible = true;
        }
        else
        {
            $("#informations").hide('slide', { direction: 'right' }, 500);
            visible = false;
        }
    });

Rereading it I did the bool wrong but it doesn't really matter (Should have been if (visible)) but anyway, the bools are there to toggle the visibility of the said div.
Having the informations div hidden and showing it with my click function doesn't show it at all frown.gif
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding ›  [ASP.Net] Hide div in C# behind the code and show it with Javascript