Expandcontract with IMG_BUTTON

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Expandcontract with IMG_BUTTON

Post by frase » Mon Feb 19, 2018 4:52 pm

Tata wrote:
Mon Feb 19, 2018 4:32 pm
Ich verstehe aber nicht, warum es beim allerersten (oder wohl auch nach längerer Zeit) wieder lehnt das Navigationsnutzen ab.
Konsole einschalten und beim Klicken beobachten.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Mon Feb 19, 2018 6:01 pm

TypeError: cannot use 'in' operator to search for 'forum_url' in 'event.state'
Ich meine nicht weiter zu kommen.
Nach dem Refresch:
TypeError: document.body is null
[Learn More]
rancdubina:139:1
TypeError: this.elt is null
[Learn More]
slideshow.js:3:130
TypeError: a is null
[Learn More]
js:89:186
Noch habe ich mit dem Plugin gespielt on onMouseOver/onMouseOut reingegeben. Es funzt aber gar nicht.
Demo unter http://rancdubina2.cmsimple.sk/de/#Dienstleistungen
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Expandcontract with IMG_BUTTON

Post by lck » Mon Feb 19, 2018 7:41 pm

Tata wrote:
Mon Feb 19, 2018 3:31 pm
Ja, genau. anklickend die Hauptnavigation (oben in jedem Template) passiert nichts. Erst nach dem Refresch, oder Templatewechsel, oder Sprachewechsel funktioniert das Menu normal.
cmb wrote:
Mon Feb 19, 2018 3:56 pm
Hm, bei mir funktioniert die Navigation in Chrome 64.0.3282.167 sofort (also ohne zusätzlichen Refresh). Ich war aber vor ein paar Stunden auf der Seite, und da hat die Navigation auch nicht funktioniert – es schien mir aber, dass die entsprechenden Seiten-Inhalte gar nicht vorhanden waren.
Ich kann es so nachvollziehen, wie es Martin geschrieben hat. Nach einem Refresh der Seite ist der Content da und die Seite kann normal benutzt werden. Vorher ist der Contentbereich vollkommen leer bis auf etwas vom Minicounter:

Code: Select all

<div id="content">
      <img src="?&amp;minicounter_image" width="1" height="1" style="position: absolute">  </div>
Die Browserkonsole bringt auch Fehlermeldungen. Kann das Problem der Minicounter sein? Siehe Thread viewtopic.php?f=16&t=5559&p=60774&hilit ... her#p60774
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Expandcontract with IMG_BUTTON

Post by lck » Mon Feb 19, 2018 7:46 pm

Tata wrote:
Sun Feb 18, 2018 1:54 pm
3. Wie es so stylen, dass der Aktive Button auch aktiv aussieht?
Benutze :focus

Code: Select all

.expand_button button[type=submit]:focus, /* das hinzu */
.expand_button button[type=submit]:hover {
    border: 2px solid orange;
}

.expand_button button[type=submit]:focus div.title, /* das hinzu */
.expand_button button[type=submit]:hover div.title {
    background: orange;
    color: #000;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Mon Feb 19, 2018 9:21 pm

Den onMouseOver Trick habe ich durch stylesheet ersetzt:

Code: Select all

.expand_button button[type=submit] img{
	width: 100%;
	-webkit-filter: grayscale(100%);filter: grayscale(100%); opacity: 1;
	}
.expand_button button[type=submit]:hover img{
	width: 100%;
	-webkit-filter: hue-rotate(355deg); filter: hue-rotate(355deg); opacity: 1;
	}
So ist nur ein Bild im expandcontract Plugin gerufen (orange):

Code: Select all

/*** Mod by Tata ***/
        } elseif ($useimages) {
            $o .= '<form method="post" class="expand_button" action="?' . $u[$value] . $js . '">';
            $o .= '<button type="submit" value="';
            $o .= $linktext? $linktext : $h[$value];
            $o .=  '">
            	<img src="'.$pth['folder']['images']. $h[$value] .'.png"> 
            	<br>
            	<div class="title">' . $h[$value] .'</div></button>
            	</form>';
"focus" hat bei mir keine Wirkung.

minicounter habe ich auch aus allen Templates rausgenommen. Auch ohne Wirkung (wenigstens soweit).
themeswitcher ist auch raus. Auch ohne Wirkung.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Expandcontract with IMG_BUTTON

Post by lck » Wed Feb 21, 2018 7:05 pm

Tata wrote:
Mon Feb 19, 2018 9:21 pm
"focus" hat bei mir keine Wirkung.

minicounter habe ich auch aus allen Templates rausgenommen. Auch ohne Wirkung (wenigstens soweit).
themeswitcher ist auch raus. Auch ohne Wirkung.
:? Wie ich sehe, hast du :focus eingebaut und es funktioniert auch. Auch die Seite lädt normal, wie sie soll, zumindest bei mir.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Wed Feb 21, 2018 8:31 pm

Bei mir wird die graue Farbe zu orange geändert beim "hover". Dann wird sie wieder grau. Ich meinte die Farbe orange zu halten bis die verlikte Seite aktiv ist.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Fri Mar 09, 2018 2:21 pm

My previous idea is almost completely finished. The results are visible here:
http://rancdubina.cmsimple.sk/?Fotogaleria#content or
http://rancdubina.cmsimple.sk/?Dalsie-sluzby#content

But there are still things I don't understand.
An exact copy is made at http://rdtest.cmsimple.sk and here everything look as expected.
1. On my localhost looks the result like this:
expcontr_mod_1.jpg
on the host, hovever as if the stylesheet is not evaluated
expcontr_mod_2.jpg
2. As shown on localhost - I can't fond the way of correct styling - see the last button
3. There is used $h[$value] in

Code: Select all

...
        } elseif ($useimages) {
            $o .= '<form method="post" class="expand_button_image" action="?' . $u[$value] . $js . '">';
            $o .= '<button type="submit" value="';
            $o .= $linktext? $linktext : $h[$value];
            $o .=  '">
            	<img height="'.$limitheight.'" width="'.$limitheight.'" src="'.$pth['folder']['images'].'expand_icons/'. $h[$value] .'.jpg"> 
            	<br>
            	<div class="title">' . $h[$value] .'</div></button>
            	</form>';
The trick is that the images MUST have exact the same name as the relevant pages. But in some cases (because of eastern characters), the page names used for the images names are not accepted. The names of pages are unencoded in URL. But I can't find the way how to make it, that the images names would also used the exact page names from the URL. E.g.:
The page Červená Karkuľka is encoded to Cervena-Karkulka. It works if I give the names without accents etc. both to the pages and images (even without spaces or dashes). But having the page names without those eastern specifics may be confusing.
I have also found thet the value
$limitheight
is also not evaluated correctly.
If interested, have a look on my mod (respective userfiles/images/expand_icons included).
EDIT:
Suddenly, after 2-3 deletion of both subdomains and new uploads, problem Nr. 1 is gone. But I haven't found any solution for remaining problem 2-3. I am sure there should be a way how to apply $tx['urichar']['new']/['org'] to $h[$value].
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Sat Mar 10, 2018 3:17 pm

It is not exactlz the solution I wanted. But it works at leas on a specific Webpage pretty well.
Changing the part in index.php

Code: Select all

        } elseif ($useimages) {
            $page_title = $h[$value];
            $icon = explode(' ',trim($h[$value]))[0];

            $o .= '<form method="post" class="expand_button_image" action="?' . $u[$value] . $js . '">';
            $o .= '<button type="submit" value="';
            $o .= $linktext? $linktext : $h[$value];
            $o .=  '">
            <img height="'.$limitheight.'" width="'.$limitheight.'" src="'.$pth['folder']['images'].'expand_icons/'. $icon .'.jpg"> 
            	<br>
            	<div class="title">' . $h[$value] .'</div></button>
            	</form>';
Now the PageTitle is checked and the first word is kept in
$icon
and used in image tag. So - used for a photogallery it means that I need to prepare an icon with a specific one-word name and use this name as the first Word in PageTitle.
Let say - I would have 5 albums of 5 various weddings. Having the icon "Wedding.jpg", each PageTitle beginning with "Wedding" will get the same icon.
Or, if I want to use a thumbnail as an icon, I must name this thumbnail after the first word from the PageTitle.
Still, remains the problem with some characters and correct styling of the titles below the expand-icons (to keep the max-width of the images).
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expandcontract with IMG_BUTTON

Post by Tata » Sat Mar 10, 2018 5:59 pm

Hopefully finished. If you have any comments/hints/suggestion, everything is warmly welcome.
Tips:
1. Create hidden subpages as usual with expandcontract plugins.
2. Create a class img.icon in your stylesheet.
3. Some icons are included in the archive in usersfiles/images/excpand_icons. Also some demo picture-icons.
4. Use the plugin as usual (there are options: link | button | image) in plugin configuration.
5. See how the icons are named - they must correspond to the first word in the subpage title. The plugin reads the subpage title and looks for the icon identica with the first word.
E.g. The subpage title is Sport blablablabla, plugin thus look for the icon Sport.jpg
That shall be all, though. If I missed something, let me know.
expandcontract-mod2.zip
DEMO
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply