Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

To hide a tag using jquery

Posted on 2017-08-12
20
Low Priority
?
51 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
  • 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 61

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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 61

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 61

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 61

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 61

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 60

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 61

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 60

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 61

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 60

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 61

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 60

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 61

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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

926 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