Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: 1 [2]   Go Down

Author Topic: Adding matching website navigation to coppermine theme  (Read 23293 times)

0 Members and 1 Guest are viewing this topic.

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Adding matching website navigation to coppermine theme
« Reply #20 on: September 17, 2015, 11:42:13 am »

no javascripts (less load for the server).

FYI: the only load for the server is to transfer the JavaScript code to the client (the same applies for CSS, HTML, etc.). JavaScript itself is interpreted and executed client-sided.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #21 on: September 17, 2015, 01:02:58 pm »

Sorry I was a little busy.
DONE.
Test it and LET ME KNOW if you need changes.
I made the mobile menu with html <span>&#9776;</span> (the 3 line ). I did not used genericons fonts anymore. I commented them out in the code. Less files to load, faster gallery.

the drop down menu (parent pages MPH, Online) runs off and causes the side to side scroll bar to appear at the bottom of the page
That happens even on your wordpress site (see attachment 1.jpg). Is normal because the child widh is bigger then the parent width.
Is a normal behavior and it shows only on hover.

I spent a couple of hours trying different things out

Please don't spend time editing. Just ask me. I'll be glad to help.

FYI: the only load for the server is to transfer the JavaScript code to the client (the same applies for CSS, HTML, etc.). JavaScript itself is interpreted and executed client-sided.

I made another menu still in CSS. I usually dislike pages with javascript. They tend to block my browser. Yes, I know he has adsense anyway.
« Last Edit: September 17, 2015, 09:58:02 pm by allvip »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Adding matching website navigation to coppermine theme
« Reply #22 on: September 17, 2015, 01:15:51 pm »

I usually dislike pages with javascript.

I agree. I just wanted to let you know, that JavaScript isn't processed server-sided ;)
« Last Edit: September 17, 2015, 01:19:21 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #23 on: September 17, 2015, 01:19:29 pm »


Good to know. Thanks.
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #24 on: September 17, 2015, 07:21:37 pm »

Thank you so much, allvip! I will download the updated zip file soon. I haven't done so yet. I will when I get on my computer in a couple of hours. I'll let you know how it works out. :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #25 on: September 17, 2015, 11:53:53 pm »

The menu is not working on mobile. I'm working on a jquery menu.

WITH jquery menu ( just a few lines of javascript in template.html, the rest is CSS).
« Last Edit: September 18, 2015, 12:53:20 am by allvip »
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #26 on: September 18, 2015, 12:27:54 am »

The menu is not working on mobile.
Correct. Unfortunately.

I just uploaded the new files a few minutes ago and then checked from my mobile. When the parent pages are clicked on from a touch screen to open the drop down list of children pages, you're taken to the main site instead. There must be something (code) missing to prevent the parent pages with children to not be functional (not open) and just open the drop down list only so that the children pages can open when clicked on.

However, I've noticed that it works if the screen is touched slowly and delicately, ha ha. But visitors will not know how to touch the drop down menu a certain way on the touch screen, softly and slowly.

If it can't be figured out, maybe I can just have all parent pages and no drop down list with children pages. Or actually, I can replace all "#" in the parent pages with the actual links to those parent pages. The parent pages on my site all have content on them with lists listing all of the children pages. Except for the "Events" page, I believe.

What do you think or suggest, allvip?

The top menu navigation looks great! :)
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #27 on: September 18, 2015, 12:30:09 am »

The menu is not working on mobile. I'm working on a jquery menu.

OK, allvip! I just saw your updated comment. Thank you! I'll wait. Please take all the time you need. It's no rush. :)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #28 on: September 18, 2015, 12:31:47 am »

Reply #25 has the new upload.
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #29 on: September 18, 2015, 01:51:58 am »

&#38;#9776; and &#38;#735; are not fit for mobile.

Replace in template.html

Code: [Select]
            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>

with

Code: [Select]
            <button class="hamburger"> </button>
            <button class="cross"> </button>

Upload the new style.css
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #30 on: September 18, 2015, 01:56:06 am »

However, I've noticed that it works if the screen is touched slowly and delicately, ha ha. But visitors will not know how to touch the drop down menu a certain way on the touch screen, softly and slowly.

Because is an on hover menu not on click. You have to hover with the finger not to touch but I will change it to be on click not on hover. I did not thought of mobile diffrence from PC.
Check back later or tomorrow.
Logged

PinkRoseChristina

  • Coppermine newbie
  • Country: us
  • Offline Offline
  • Gender: Female
  • Posts: 19
    • MikePosner.net
Re: Adding matching website navigation to coppermine theme
« Reply #31 on: September 18, 2015, 02:02:38 am »

&#38;#9776; and &#38;#735; are not fit for mobile.

Replace in template.html

Code: [Select]
            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>

with

Code: [Select]
            <button class="hamburger"> </button>
            <button class="cross"> </button>

Upload the new style.css
Yay! It's working! I had to change the parent URLs (that have children) all to "#" to make the drop down menu operate properly like it should for mobile.

Example:

Before:
Code: [Select]
<li><a href="http://mikeposnerhits.com/#" target="_blank">Mike</a><span class="caret"></span>

After:
Code: [Select]
<li><a href="#">Mike</a><span class="caret"></span>
I think everything else within the gallery is working as expected, before the new top menu/navi was added. I hope! If you have some time to look at my gallery, please let me know if you see any problems or errors. ;)

Do I still need to make the following changes???

Replace in template.html

Code: [Select]
            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>

with

Code: [Select]
            <button class="hamburger"> </button>
            <button class="cross"> </button>

THANK YOU, allvip!  :D
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Adding matching website navigation to coppermine theme
« Reply #32 on: September 18, 2015, 02:14:04 am »


Do I still need to make the following changes???

Replace in template.html

Code: [Select]
            <button class="hamburger">&#38;#9776;</button>
            <button class="cross">&#38;#735;</button>

with

Code: [Select]
            <button class="hamburger"> </button>
            <button class="cross"> </button>

THANK YOU, allvip!  :D

I don't know how it looks on your mobile phone but on my the 3 lines looks very ugly so is better to use genericons fonts. So the answer is yes. Also replace style.css with the one I attached in Reply #29.

Other then that everything is fine.
« Last Edit: September 18, 2015, 02:43:55 am by allvip »
Logged
Pages: 1 [2]   Go Up
 

Page created in 0.035 seconds with 20 queries.