Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

To hide a tag using jquery

Posted on 2017-08-12
20
Low Priority
?
36 Views
Last Modified: 2017-08-15
I have a div tag "tab-hidden" inside my master-page.aspx file and i am including my master-page in all my pages present in my project. But the issue is i have to hide that div tag from some pages in my project.

 <div class="tab-hidden" style="margin-top: 60px; margin-left: 203px;">  
         <div class="tabbing" id="ipi1">
             <a href="Client_PlaningInformation.aspx" onclick="landingdetails('ipi')">
               
                 Important planning information
            </a>
         </div>
         <div class="tabbing" id="ots1">
             <a href="Client_OrderYourStand.aspx" onclick="landingdetails('ots')">
                
                 Order Your Stand Services
             </a>
         </div>
         <div class="tabbing" id="marketing1" runat="server">
             <a href="#" onclick="landingdetails('marketing')">
               
                 Marketing
             </a>
         </div>
     </div>

Open in new window

0
Comment
Question by:sana khan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 4
  • +1
20 Comments
 
LVL 4

Accepted Solution

by:
M. Tariq earned 1000 total points
ID: 42252625
Hey Sana,
There are couple of ways to handle this, however the most straightforward one is, in the specific page, hide the tag using jquery:
$("#tab-hidden").hide()

Open in new window


You can also add the pages names in an array in the master-page, and on load you should get the current page name, if it is in the array then apply the hide function, otherwise do nothing.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42252638
add this to your page

<%@ Page  masterPageFile="~/MasterPage.master"%>
<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window


then give a unique id to that div

<div id="myTab" runat="server" class="tab-hidden" style="margin-top: 60px; margin-left: 203px;">   

Open in new window


then on any page

Master.myTab.visible=false

Open in new window

0
 

Author Closing Comment

by:sana khan
ID: 42252639
This works for me
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 59

Expert Comment

by:HainKurt
ID: 42252640
This works for me

no it does not :)

maybe this works...

$(".tab-hidden").hide()

Open in new window

1
 

Author Comment

by:sana khan
ID: 42252641
yes i have just added "." instead of "#"
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42252642
and it flickers on browser...
initially visible, and gets hidden after page is loaded...
also, it is rendered on every page unnecessarily...

you should set visible=false on server side...
1
 

Author Comment

by:sana khan
ID: 42252648
on which page do i have to add this

<%@ Page  masterPageFile="~/MasterPage.master"%>
<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window

0
 

Author Comment

by:sana khan
ID: 42252650
and this will be on page load on the page where i have to hide the div tag

Master.myTab.visible=false

Open in new window

0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42252653
this should be on the pages that you want to refer to master

<%@ MasterType  virtualPath="~/MasterPage.master"%>

Open in new window


and this

Master.myTab.visible=false

Open in new window


on any page that you want to set it hidden
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42252654
maybe we can use session for this purpose...

on master page.init, set session("showpanel")=true...
then on any page.load set session("showpanel")=false
and finally, on master page on prerender event use

myTab.visible = session("showpanel")

this method may be easier...
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42252683
You can do this with CSS by giving the body tag of each page a unique class.

<body class="home-page">
<body class="product-page">

Open in new window


You can then hide the tab relative to the page

.home-page .tab-hidden {
   display: none;
}

Open in new window

0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42253002
using any solution that deals with css/jQuery is not good and you should make them invisible on server side so it does not rendered at all...
1
 

Author Comment

by:sana khan
ID: 42255119
 protected void Page_Init(object sender, EventArgs e)
    {
        set Session["showpanel"] = true;
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        myTab.Visible = (bool)Session["showpanel"];
    }

Open in new window


giving error in this line
 set Session["showpanel"] = true;

Open in new window


showing 2 errors please check below is the screenshot

Error1.png
Error2.png
0
 

Author Comment

by:sana khan
ID: 42255121
First screenshot error is of showpanel inside Page_Init and second screenshot error is of true after equal sign
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42255150
using any solution that deals with css/jQuery is not good and you should make them invisible on server side so it does not rendered at all...
You might want to contact  the Bootstrap crowd and run this by them. Much of the responsive design paradigm is based on hiding  / showing content for different media.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42255530
You might want to contact  the Bootstrap crowd and run this by them. Much of the responsive design paradigm is based on hiding  / showing content for different media.

this is nothing to do with bootstrap...

if that rendered part is taking 50K, adding that to each and every page and sending to client and hiding it on client side is just a NO NO if we can avoid this on server side... thats why we have server side coding... moving server side codes/logic to client side should be avoided...

this is very obvious and I don't see anything to argue about this :)
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42255585
this is very obvious and I don't see anything to argue about this :)
You stated
using any solution that deals with css/jQuery is not good
This general dismissal is not correct.

Bootsrap is relevant as the hiding and showing of content on a rendered page is standard practice. If the page has a large payload that needs to be excluded then yes you don't render that - but that is not what this question was asking. It was about not showing an element on certain pages which makes a CSS / jQuery solution perfectly acceptable.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42255608
hiding some elements initially and then show them on some events is different thing...
rendering some content which will never appear on the page is another thing...

we use jQuery or any css to temporarily show/display elements...
if it is never used on page and will be hidden all the time, we should not render it at all, ie, we should use server side to hide/make it invisible/do not render at all...

if this was any good, MS would not put any visible property on elements :)
or implement that visible thing on client side using css or implement using client side code...

I just pointed the client side issues
- page size will be larger
- load time will be slower
- there may be flickering issues (before page is fully loaded, those elements may be visible until page is loaded and jQuery kicks in and hides it)

also

it will increase bandwidth
increase resources used on web server
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 42255926
hiding some elements initially and then show them on some events is different thing...
rendering some content which will never appear on the page is another thing...
In a responsive design you target a screen - it stays the same - content stays hidden permanently. On a different screen that content shows - that is not hiding and showing - it is exactly the case this post relates to and is a concept anyone who engages in responsive design is very familiar with.

Bottom line jQuery / CSS options are perfectly acceptable here - there is no reason to make statements that suggest otherwise.
0
 
LVL 59

Expert Comment

by:HainKurt
ID: 42255936
the original issue is nothing like you describe

But the issue is i have to hide that div tag from some pages in my project.

so, putting unrelated data in pages and hide them every time is not a viable solution...
1

Featured Post

DFW AZURE MEETUP TONIGHT FRI 6PM

We will be discussing what Azure Stack is, how does it fit into the suit of offerings that Azure has currently, and where can it fit into your organizations technology stack. We will also be discussing limitations of the platform while covering various applicable scenarios.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question