show/hide

[Allie_P]

Hi,

I’m trying to replicate what happens here with the top/left widget and its content, specifically the clock and the mobile feed, where if you click on the widget’s icons the respective content appears, while disappearing from the widget, and vice versa.

I’ve been looking at that code for a while but couldn’t really replicate it nor could I find a plugin that would do something like this.

Help, please! :)

[Shikkediel]

Looks like some basic jQuery… and not very well coded for that matter. One example of that :

$('#MOBILE_FEED').animate({'opacity':0.0},100, function() { $('#MOBILE_FEED').css('display', 'none') } );

Would be the same as :

$('#MOBILE_FEED').fadeOut(100);

Vice versa it’s a simple .fadeIn(), triggered by an event listener on the icon…

[Beverleyh]

Something in plain JavaScript, with a save cookie, might look like this: http://fofwebdesign.co.uk/template/_testing/widgets-show-hide-dock-cookie.htm

[Allie_P]

Thank you both for your help.

I’ve created this pen that for the most part is working fine, the only issue is that the content for the Mobile Feed item is being pulled with php. Right?

Would it be too hard to tweak it so that no php would be required? I’d like to keep the same functionality but be able to set up everything directly on the html/css side.

Thanks again.

http://codepen.io/Allie_P/pen/mPjbem

[Allie_P]

Nobody? :(

[Shikkediel]

Looks to me it’s all JS driven, it’s just that the page it gets the content from has a .php extension. But that’s rather trivial and not the essence of the function itself, it could be a .html page too.

function mobile_feed_next(o) {
    $('#MOBILE_FEED_INNER').html('Loading mobile feed').load(URL_ROOT + '_INCL/loadMobileFeed.php?o=' + o);
}

[Allie_P]

Okay, I think I understand that.
But what I wanted was to be able to have the content inside its own html.
Here:

<div id="MOBILE_FEED">
  <div id="MOBILE_FEED_INNER" class="smallertext"></div>
</div>

Am I making any sense?

[Shikkediel]

inside its own html

I don’t really get that to be honest, could you elaborate?

With the function in my previous post, the content gets called from another page with .load() and placed inside the MOBILE_FEED_INNER div…

[Allie_P]

With the function in my previous post, the content gets called from another page

Exactly, and I don’t want that.
I don’t want to load the content from another page.
I want to keep the same functionality but have the content inside that page, inside that div.

[Shikkediel]

I’ve added two divs – with most of the content from there :

<div id="MOBILE_FEED">
  <div id="MOBILE_FEED_INNER" class="smallertext">
    <div>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td align="left">Mobile Feed by Edo</td>
            <td align="right"><a href="javascript:mobile_feed_close()">close</a></td>
          </tr>
        </tbody>
      </table>
      <div id="MOBILE_FEED_INNER_IMG"><img src="//www.anony.ws/i/2016/04/22/somename.jpg"></div>
      <br>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td width="200" align="left">Some text</td>
            <td width="124" align="right"><a target="_blank" href="/">location</a>
              <a style="margin-left:3px" href="javascript:mobile_feed_next()">next</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td align="left">Mobile Feed by Edo</td>
            <td align="right"><a href="javascript:mobile_feed_close()">close</a></td>
          </tr>
        </tbody>
      </table>
      <div id="MOBILE_FEED_INNER_IMG"><img src="//www.anony.ws/i/2016/04/22/whatever.jpg"></div>
      <br>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td width="200" align="left">Some text</td>
            <td width="124" align="right"><a target="_blank" href="/">location</a>
              <a style="margin-left:3px" href="javascript:mobile_feed_next()">next</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Small bit of style :

#MOBILE_FEED_INNER > div:not(:first-of-type) {
display: none;
}

And a new function that will show these divs consecutively :

var count = 0;

function mobile_feed_next() {

    $('#MOBILE_FEED_INNER > div').eq(count).hide();

    count++;
    count = count%2;

    $('#MOBILE_FEED_INNER > div').eq(count).show();
}

Just make sure to adapt this number to the amount of divs present, then it will loop :

count = count%2;

Demo

[Allie_P]

That’s exactly it!
Thank you very much.

Just a couple of questions though:

• Would it be too much work to add a “Previous” button? JS is not my forte, so I really can’t tell.
• If I want to add more divs like:

<div id="MOBILE_FEED_2">...</div>

<div id="MOBILE_FEED_3">...</div>

how do I edit the JS? Can I just add the id? Will I have to copy/paste the whole function for each new div?

• Can you tell me what this does? Do I need all of it?

    URL_ROOT = 'index.html'
    PAGE_SECTION = 'workbench'
    iOS = '0'
    COUNTRY = 'NETHERLANDS'

    var u = self.location.href
    if (u.indexOf("www.???.com") != -1) {
        window.location.replace(u.replace("www.google.com", "google.com"))
    }
    if (u.indexOf("www.???.com") != -1) {
        window.location.replace(u.replace("www.google.com", "google.com"))
    }

    $(window).bind("load", function() {
        lets_go()
    });

I noticed that I can’t delete it or it would break the whole thing, but changing the address to google made no difference.

Thanks a lot.

[Shikkediel]

Would it be too much work to add a “Previous” button?

Do you need the location link? I could turn that into one pretty easily otherwise…

If I want to add more divs

So just to be clear, you’d like to create several mobile feeds? That would probably require quite a bit of adjustment…

Can you tell me what this does?

Not really, I’m not sure what ??? would indicate. I can’t imagine it would represent a wildcard for a web address. Besides that, I guess it would only ever be needed for Google Maps. And I’m not even sure that bit of JS would work at all anyway if the location.href is Google and not their own page. I don’t think you need it in any case. As far as I can see you could delete all but these :

    PAGE_SECTION = 'workbench'
    iOS = '0'
    COUNTRY = 'NETHERLANDS'

I have not yet looked into this though :

    $(window).bind("load", function() {
        lets_go()
    });

[Allie_P]

Do you need the location link? I could turn that into one pretty easily otherwise…

Not at all.
In fact, turning it into a “Previous” link is exactly what I need.

So just to be clear, you’d like to create several mobile feeds?

Yep.

That would probably require quite a bit of adjustment…

Wouldn’t duplicating the whole thing work?
I know it might be far from ideal, but…

Not really, I’m not sure what ??? would indicate. I can’t imagine it would represent a wildcard for a web address.

Sorry I messed up that part.
This is what it looks like:

    <script language="javascript">
        URL_ROOT='index.html'
        PAGE_SECTION='workbench'
        iOS='0'
        COUNTRY='NETHERLANDS'

        var u=self.location.href
        if (u.indexOf("www.nodeberlin.com")!=-1) {
            window.location.replace(u.replace("www.nodeberlin.com", "nodeberlin.com"))
        }
        if (u.indexOf("www.nodeoslo.com")!=-1) {
            window.location.replace(u.replace("www.nodeoslo.com", "nodeoslo.com"))
        }

        $(window).bind("load", function() { lets_go() });       
    </script>

And you’re right, it’s obvious it has to do with Google Maps.
I won’t need that, so I think it’s safe to delete it.

This though is something I don’t quite understand:

iOS='0'
COUNTRY='NETHERLANDS'

Country changes according to the visitor.
I just used a US proxy and it changed to… UNITED STATES.
Should I leave it empty? Do I even need it at all?

iOS I also don’t know what it does and if it should stay ‘0’.
I’d love to learn more about it but Google isn’t being much help… lol

[Shikkediel]

Okay, the original code makes more sense… it simply removes the www from the web address if it’s present. Something I tend to do as well but with htaccess rules instead. Definitely not necessary.

I just used a US proxy and it changed to… UNITED STATES.

That bit of code is likely created (echoed) with PHP, based on the IP address – and browser sniffing the OS in case of the other one. You don’t really need it but removing it will mess up the variables in the external script.

Which brings me to the main question – if it’s only about those three items on the page then there’s a lot of abundant code. You could rip most of it out but it’s quite tedious.

[Shikkediel]

Removed what I posted here after more insight…

Not exactly sure everything is correctly stated in the middle bit of my previous reply either. The code’s kinda all over the place.

[Author]

Posts