Start a new topic
Answered

Removal of "are you...join today" button section in widget

This original tread was closed before I could supplement. 

http://support.brilliantdirectories.com/support/discussions/topics/5000066399


I removed the desired button fine via line 9 in the corresponding widget. However, the changes DO NOT reflect on mobile version. It's still there despite this change. 


How do I remove it for mobile viewing? I'd actually like to keep it for desktop.


In addition, I've noticed that changing variables in some widgets responds via desktop, but seems to not effect mobile view. As if the mobile attributes are elsewhere.


What is the issue here as well?


Thanks. 


Best Answer
Correct Johnny. One way would be creating two classes, let us call them hideMe and attachMe. attachMe would go directly on the elements that would hide/show depending on the device/width/height/other factors. Now for the properties of hideMe it would look like this:

.hideMe {
    display:none;
}

How would this work?

It would work like this, on a javascript (Any javascript on any widget on the same page) you would create a javascript that checks for the device/width, if the device/width matches what you are looking for (greater than, equal to or less than), then it would run the following line:

$('.attachMe').addClass('hideMe');

And if it does not then it would run the following:

$('.attachMe').removeClass('hideMe');

This way, this elements will be hidden only when the device/width matches. You can also change their size, color, text, etc.. Whatever you want depending on what you wish to check.


 


 Hi Johnny, you could do something like using CSS's media query and only showing that html element (marked with a class) on desktop only.


Another way is to set the corresponding Bootstrap classed for it that relate to showing/not showing an element on a page depending on the device that is used to view it.


Lastly you could create a javascript code that checks the device type and width, and with this information play with how you would like to show it.

Regarding option two , would that be like the previous element you helped with (top sign up/login) in hiding depending on size? Same script and location in CSS notes? How would I hide the one element of that single button and not the whole widget if done this way?
Answer
Correct Johnny. One way would be creating two classes, let us call them hideMe and attachMe. attachMe would go directly on the elements that would hide/show depending on the device/width/height/other factors. Now for the properties of hideMe it would look like this:

.hideMe {
    display:none;
}

How would this work?

It would work like this, on a javascript (Any javascript on any widget on the same page) you would create a javascript that checks for the device/width, if the device/width matches what you are looking for (greater than, equal to or less than), then it would run the following line:

$('.attachMe').addClass('hideMe');

And if it does not then it would run the following:

$('.attachMe').removeClass('hideMe');

This way, this elements will be hidden only when the device/width matches. You can also change their size, color, text, etc.. Whatever you want depending on what you wish to check.


 

Ok. Are these adjustments made in the second CSS section or maim code area?
On any CSS you wish to add them to. But they need to be on the page that will be affected.

 

So in the supplemental CSS section of the "latest members" widget, how would I differentiate hiding the button for "joining" for only mobile, but retain the rat of the widget intact? It seems that it would hide all elements not just the one.
Here is some information regarding this Johnny. If you would like for us to do this for you, you can go to the Market Place for pretty much any customization.