behavior of icons in headerTitle of jsPanel

[AviHafner]

Hello Stefan I need your advice and your opinion

In the University where I am working in the main page http://www.technion.ac.il/en/ (that is not part of my responsibility), At the bottom of the page there are some icons with the name Read More the links open a Panel, In the Header of the Panel, I like the icons, the shape, the colors and the behavior of the event of mouse over, Do you have any advice how I implement this forms of behavior in jsPanel

Stefan Thank you for a tremendous product and your advices Yours always Hefner Avi

[Flyer53]

Hi Avi, Is it just the behaviour you want to change or also the icons itself? In any case I would appreciate a few more details on how you would like it to be. To me it appears that a single icon changes from left-to-right text direction to right-to-left text direction on hover. Is that correct? However, if you provide a few more details I would be glad to help.

Btw: I'm working on a jsPanel version that does without dependencies (not even jQuery) supporting browsers down to IE10. In case you're interested: http://alpha.jspanel.de/media/demos/nojquery/index.php

[AviHafner]

Hi Stefan I want only the change of the icons forms not the behavior from Example page, I think that it’s a bug of programmer that didn't check the behavior in the English Version of this page. I like the forms of the icons.

In the subject of IE-10: I force all my customers that working with IE to work with IE-11 or Edge

[Flyer53]

Ok Avi, I think the best solution would be to implement a feature that allows to use a custom iconset for the controls. Shouldn't be a big thing and might be useful for others as well. Let me try a few things first ... I'll be back here ...

[AviHafner]

Hi Stefan it’s a Dream To work with you, I feel like Aladdin, I just have to ask a wish and you will fulfill it.

I'm waiting for it. My deepest gratitude.

[Flyer53]

My pleasure Avi :) ... and there is something to show already. Please follow this link and scroll down to the new example 4. If that's something you can work with I'll post a link where you can download a preliminary version 3.7.0 to test.

[AviHafner]

Hi Stefan This is the way to fulfilling my wish Please send me the link to Download the new version.

Steps that we are going to do

1. I going to changed the shape of Close Icon to look like something that I like, when I will finish I will send you the result.
2. I am going to give to Designer to shape the rest of the icons, when he will finish I will send you result.
3. In the TableSorter you can find a kit of css that users can chose You can see Example in https://mottie.github.io/tablesorter/docs/example-widget-columns.html Please try the combo box that call Choose Theme:

[Flyer53]

Hi Avi, sounds good :) Here's the new version: jspanel-3.7.0-alpha.zip But remember that it's not an official release yet. But I don't expect any problems. The only change compared to the latest release beside the new iconfont feature is a slightly changed css concerning the hover effect of the controls. Looking forward to see a new set of control icons. Best regards, Stefan

[AviHafner]

Hi Stefan We finished to create icons for each item in the title.

Can you please check why in this example headerLogo not working? Please check both the Hebrew and English versions. You can check the example in http://www.admin.technion.ac.il/Anat/ You can download the example from http://www.admin.technion.ac.il/Anat/jsPanel-headerControls.zip

Please check it and send me a comment

My opinion 1) You need to add support for hover event 2) What is you opinion about the idea to add kit name like in the tablesorter Then to use the feature the developer need to mention only the name of the kit, like ice or iceheb, blue and so on You can take the current images from the zip file and use them in your jsPanel,

If you are you are going to use the images, please mention the name of anat hargil the women that she Created the images .

looking forward yours avi hafner

[Flyer53]

Hi Avi ... that was quick :) I'll check it out and come back here as soon as I have something ...

[Flyer53]

Ok, here's the answer for the header logo: The example page doesn't load the font-awesome css. So the logo code is there but the icon itself doesn't show up because the font-awesome css is not loaded. Just add the link tag ... //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

[Flyer53]

Now to the hover effect: You don not need all those hover functions at all. hover(), removehover() and all the functions in the panel callback you use to handle the image change on hover can be replaced by a simple change of the css. Here is the example for the close control:

.custom-control-icon.custom-close::before {
        content: url(img/Qclose.png);
}
.custom-control-icon.custom-close:hover::before {
        content: url(img/Qclose_over.png);
}

Do you see the difference? You can combine the :hover pseudo-class with the ::before pseudo-elelment to achieve the change of the image on hover. No javascript needed. I think this also answers the topic "support for hover event".

default.txt has all the changes described above incorporated (including font-awesome css). Also note how I used the array with the classnames for the controls. Not exactly what you proposed, but close ...

Let me know whether this is of help for you.

I might add this example using images for the controls to the jsPanel docs. Of course I'll add a reference to Anat Hargil then.

Best regards, Stefan

[AviHafner]

Hi Stephen It looks great I'm going to try to add some effects to look and behave like pressing Bottom. I will add button "print screen" to the title that its upper almost in all jsPanel in my projects.

When I finish tomorrow or Sunday I'll send you the result to get your opinion

[Flyer53]

Hi Avi, sounds good to me :) Idea: If you need two extra controls (print screen , the question mark) in the top row you could design them according to the design of the new control images and add them to the left of the standard controls. I think that would look much more consistent.

More thoughts:

• the text "close" next to the close control is not very good when the panel is minimized
• also the question mark (logo) appears in the minimized panel
• an added "print screen" icon would alos appear in the minimized panel
• adding the two extra controls to the container with the standard controls would automatically hide them on minimize (I would of course show you how to do that)

[Flyer53]

I created a quick live example for my last proposal: http://jspanel.de/media/demos/Avi/default.html

[AviHafner]

Wonderful it took me a while to see your perfect solution the amazing fonticon I have no words to describe the simplicity of your solution Tomorrow I will check your submission

[Flyer53]

In case you need those extra controls in several panels it's a good idea to use option.template. This means that you have to write the code for the extra controls only once for your custom template that you then assign to as much panels as you need. I added an example 6 to the live demo. Just look at the source code and you will understand: http://jspanel.de/media/demos/Avi/default.html

[AviHafner]

Hi stafen Okay, I am happy with the way that the result look

You can check the example in http://www.admin.technion.ac.il/Anat/ You can download the example from http://www.admin.technion.ac.il/Anat/jsPanel-headerControls.zip

Please help me to correct the source, I am using the keyword !important And I don’t like the use of it .

Please check it and send me a comment Thanks! Yours Avi Hafner

[Flyer53]

Good morning Avi, I'll have something ready later today :)

[Flyer53]

Ok Avi ... there are a few changes I made to your example code:

• you had some typos concerning uppercase and lowercase. Sometimes you wrote .jsPanel-btn-print and then .jsPanel-btn-Print
• option.headerTitle: whatever value you assign here will go into an h3 element. So don't append a div to an h3 (it's not needed anyhow as you will see in the code)
• I moved the font-awesome icons from the i elements to span elements. That works better with jsPanel because some default styles work already (like cursor: pointer) and there's no need to apply those styles again
• to achieve your desired styling I just override the default styles for the jsPanel theme default which you currently use. This removes the need to introduce additional css classes just for styling purposes which are tricky to implement anyhow. I suggest that you concentrate on functionality first and when you're ready we create some custom themes you use together with option.theme
• you assigned a click handler to the complete section with all the controls. I guess you meant the new print control? What's the basic intention behind this callback btw?

Take a look at the updated live demo http://jspanel.de/media/demos/Avi/default.html and tell me where I missunderstood your intentions ...

[AviHafner]

Hi stafen Thank you so much for the support and the guidance and the counseling.

About the callback: In My projects jspanel Appears in the center of the view, When the user press the print, It will not print the Jspanel Window, It Cut the view of the jspanel .

So before printing we need to adjust the jspanel and move the panel to left, And after the printing we return the jspanel to the center of the view.

Yours always Avi hafner

[Flyer53]

My pleasure Avi :)

Why don't you just add

@media print{
    .jsPanel{
        display: none;
    }
}

to your css. Then no panel will appear on a printout, no matter where it is on the page.

[AviHafner]

Hi Stafen About the callback: As usually, you are right - I actually don’t need it at all. I have fixed this issue in some of my programs by css @media print.
Thank you. Yours Avi. The timing.... You have been faster the me in some minutes.

[AviHafner]

Hi Stafen I have, hopefully, got all your suggestions in the following part of code.

Please try it. Please use the option “Print preview” to see the look of result’s “jsPanel” . I appreciate all your ideas after the testing .

The example to check: http://www.admin.technion.ac.il/avi/ To download the example: http://www.admin.technion.ac.il/avi/jsPanel-headerControls.zip

in the Examples I like especially the examples with the names Version-2 Please examine this samples and make suggestion to improve this code.

another issue about hover on icon in implementation of iconfont hover images. The browser is loading the icons in load event except the icons that loaded in hover time.

These icons going to be load in the first time in the hover event. it can be a problem in case of poor connection, Busy server, and in first use they not going to show.

In the internet you can find many articles that have explaining how to preload or pre-fetch the images. on example that you can read is : 3 Ways to Preload Images with CSS, JavaScript, or Ajax

please see and check how I implement the preload of iconfont hover images. Yours Avi Hafner

[Flyer53]

Hi Avi, I think it looks pretty good now :) and I also would prefer your version 2 without the extra text in the close control images. However, I have a few suggestions:

• there was a typo in the css: you wrote pointer: cursor instead of cursor: pointer
• the close control images of your version 2 are a bit close to the right/left edge of the panel I think. So I added code to the callback correcting this depending on text-direction. Remove the extra code if you don't like it.
• I removed the onclickhandlers from the HTML and added them to the scripttag
• the image preload issue: I noticed this also, but didn't bother about that so far. But you're right ... should be solved. Your version works but has the disadvantage that the function preloading the images gets called every time you create a panel. So I tried another approach which might not be very elegant but works just as well and runs only once unless you reload the whole page: I added a divcontainer to the HTML loading all the images. The displayproperty of the div is set to 'none', so it's not visible and doesn't use any space on the page. Then I added a handler for the window.onload event (which fires when all resources, including images, are loaded) that removes the div again, but the images remain in the cache.

An updated file is attached: default.txt It's a .txt file because GitHub doesn't allow .html files as attachments.

[AviHafner]

Hi stepen The preload Images A quote: the disadvantage that the function preloading the images gets called every time you create a panel.

My perspective about this issue The code is executing for every time that I create panel, But it's going to load the images over the internet only once in the first time to the cache. And after the first time that the images is loaded it's getting the images from cache. Even you close the browser and you coming back after few days. I prefer the preload in script not the solution as div in the html.

The loading with callback doing the loading only when it's necessary

The example to check: http://www.admin.technion.ac.il/avi/ To download the example: http://www.admin.technion.ac.il/avi/jsPanel-headerControls.zip

The result is perfect for me and all of as waiting to jsPanel 3.7.0

Yours avi hafner

[Flyer53]

Ok Avi, I understand that you don't like my first solution that much. But I still don't like the fact that the preloading function runs every time a panel is created, although it can be done with one single function call at first page load. You're right, the images itself load only once, but still the array is created/overwritten and iterated over every time. So my proposal is the following js:

<script>
    ['close.png', 'close-eng.png', 'close-eng_over.png', 'close-heb.png', 'close-heb_over.png',
     'close_over.png', 'maximize.png', 'maximize_over.png', 'minimize.png', 'minimize_over.png',
     'normalize.png', 'normalize_over.png', 'smallify.png', 'smallify_over.png',
     'unsmallify.png', 'unsmallify_over.png', ].forEach(function (item) {
        var img = new Image();
        img.src = 'img/custom-' + item;
    });
</script>

I put this script tag in the documents head section to have it executed early. It does the job and it runs only once per page load, not each time a panel is created. On purpose I preload all controls images, not only the "onhover" images.

Live demo is updated accordingly: http://jspanel.de/media/demos/Avi/default.html

What do you think?

[AviHafner]

Hi my dear Stephen

it's a great Solution Thanks a lot For simple and good Solution

[AviHafner]

Hi Stefan Two minor issues remain First: the preload need to be done after the page is rendering. I add the setTimeout to solve this issue. Second: only hover icons need to preload

The example to check: http://www.admin.technion.ac.il/avi/ To download the example: http://www.admin.technion.ac.il/avi/jsPanel-headerControls.zip

[Flyer53]

Good Morning Avi,

• First: If you use a $(document).ready() block you don't need the timeout. $(document).ready() runs when the DOM is ready to work with but before other resources are loaded. That also means that you can move it down to the other javascript (So everything is in one place)
• Second: That works fine of course, but you still might have a visual effect because the other images start to load with the first panel you create. My thinking was just "Hey, if I preload controls images anyhow ... why not all?"
• I have a Third: Because you realize the "Help" button using the logo option it also appears on a minimized panel what is not so good in this case ... I think. That's why I put it to the controls as well in one of my previous examples.

default.zip

[AviHafner]

hi Stefan I am going to read what you wrote afterward Now we are waiting to the great big version 3.7.0

[Flyer53]

Sounds like a plan ;) My guess is 3.7.0 will come by the end of the week ...

[AviHafner]

Great, I have reason to wait

[AviHafner]

Stefen hi You are right (as always) The third: Subject When miniaturization, how I need in the simple way to remove the Help icon in the title bar, And the header text that appears as part of the board in miniaturization

[AviHafner]

Stefan In a second thought I think that the solution should be part of the product behavior.

[Flyer53]

Hi Avi, I'm out of house most of the day ... so you'll have to wait until tonight for a solution/answer ....

[Flyer53]

Hey Avi,

in order to remove the logo from the minimized panel add option.onminimized to the function creating the panel like:

onminimized: function () {
    var minId = '#' + this.attr('id') + '-min';
    $('.jsPanel-headerlogo', minId).remove();
}

If you really want to remove the title text as well it's:

onminimized: function () {
    var minId = '#' + this.attr('id') + '-min';
    $('.jsPanel-headerlogo', minId).remove();
    $('.jsPanel-titlebar h3', minId).empty();
}

What do you mean with "I think that the solution should be part of the product behavior."? If that is supposed to mean that on all minimized panels the logo and title text should be removed by default then it's definitely a No from my side. In case you have several minimized panels you need something to identify which panel is represented by the minimized replacement. And that's either the tiltle text or the logo.

[AviHafner]

Hi Stefan I solved it with your recommendation onminimized: function () {        var minId = '#' + this.attr('id') + '-min';       $('.jsPanel-headerlogo', minId).css({display:'none'});        $('.jsPanel-titlebar h3', minId).css({ display: 'none' }); }, The example to check: http://www.admin.technion.ac.il/avi/ To download the example: http://www.admin.technion.ac.il/avi/jsPanel-headerControls.zip

[Flyer53]

Hi Avi, looks like we're getting to a usable result finally :) Anything else I can do for you?

[AviHafner]

hi stefan you marvelous. I hope to find deep inside myself, the same Professionalism, giving, and listening : yours qualities

It was a pleasure to work and learn from you.

No wonder that your jsPanel is my choice.

yours always Avi Hafner

[Flyer53]

My pleasure Avi, Every time I help someone I learn something myself as well ... If you consider this issue as finished please close the issue. Take care, Stefan :)