Jump to content
laura

How To Install And Use Tooltips From Walter Zorn On Pagelines

Recommended Posts

laura

Hi, I'm newbie and I'm trying to implement an onmouseover-effect on images (fade-in and fade-out) just like the HCC-sticker on the following page: http://www.hichert.c...erungen/berater

I would like to use the tooltips from walter zorn but didn't found any information about 1) if it works with pagelines and 2) how to implement it in pagelines.

Would be thankful for any help....

Share this post


Link to post
Share on other sites
James B

Hi Laura

From the link you've provided it looks like the popover is being activated by Js. I don't think you'll be able to achieve the same effect using the bootstrap popover we've installed as part of the shortcode section.

You can try this plugin though http://wordpress.org/extend/plugins/wordpress-popup/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
batman

Hi laura

I find this to do zoom

First you copy this HTML to a draft post

<ul>

<li><a href="#"> <img src="https://lh6.googleus...s526/grande.jpg" alt="Zoom effect of Images and Pictures only using CSS-thumbnail" width="200" height="119" /> <img class="zoom" src="https://lh4.googleus...s200/chica.jpg" alt="Zoom effect of Images and Pictures only using CSS" width="526" height="314" /> </a></li>

</ul>

Please change after https://

in the first link blue for

lh6.googleusercontent.com/-DJVsUHaLado/UIb3pmRpNdI/AAAAAAAAMh4/DwFyDDreLlo/s526/grande.jpg

in the second link blue for

lh4.googleusercontent.com/-2gFhQdQTy5M/UIb3peb0PLI/AAAAAAAAMhw/0Z4O4Ky6kuc/s200/chica.jpg

To see my upload Picassa image

Then add in your CSS

.photo{margin: 0;padding: 0;}

.photo img{border: none;}

.photo li{

list-style: none;

position: relative;}

a .zoom{display: none;}

a:hover .zoom{display: block;

position: relative;

top: 0;

left: 0;

box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;}

Save the post as a draft and you can see preview, this work for me


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman

Upps I don´t see the James B reply....

This is more better than mine

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
laura

Thank you first of all for your quick response... ;-)

I find both solutions very good and its close to what I'm looking for.

I've tried the wordpress popup plugin but I don't get the onmouseovereffekt (fade-in and -out).

With the html-solution of batman I can get that effect but by mouse hover, the other pics and text underneath that picture always jumped down automatically.

Is there a way to fix that?

Share this post


Link to post
Share on other sites
batman

Hi again

Please try with


.photo{margin: 0;

padding: 0;}

.photo img

{border: none;}

.photo li

{list-style: none;

position: relative;}

a .zoom

{display: none;}

a:hover .zoom

{display: block;

position: absolute;

box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-webkit-box-shadow:rgba(0,0,0,.5) 0 3px 6px;

-moz-box-shadow:rgba(0,0,0,.5) 0 3px 6px;}

To see if this is you need.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
laura

Hi batman,

perfect. its fixed... :-)

Thank you guys so much and have a nice day!

Share this post


Link to post
Share on other sites
Danny

The topic was marked as resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • cas45
      By cas45+
      I am running a site based on PageLines Framework 2.5.0. I am making some changes to a current website and managed to find a script that will do what I want.:
       
      $(".vend-cat").each( function() {
          if ( $(this).find(".no-vendors").html() == '' ) {
                 $(this).hide();
          }
      } );
       
      I have tested it on jsfiddle and it works fine. It does however need to be adapted to work with jQuery for pagelines and wordpress. Any help or advice?
       
      Thanks
    • unifeyed
      By unifeyed+
      Hello there. 
      I am trying to have all the ® symbols throughout my website superscript without having to individually go to each symbol and wrap them in <sup> tags. There is quite a bit of them. I have the following code within the Custom Scripts, but it seems to cause issues with the Hamburger navigation, as it does not seem to work. Can you offer up some assistance? 

      <script>
      jQuery(document).ready(function() {
                 jQuery("body").html(
          jQuery("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
         );
              });
      </script>
    • ketri
      By ketri
      Hi!

      I'm using a jQuery-plugin called Taeggie (http://taeggie.com/)

      It seems that it requires jQuery version that's later than what comes with WordPress (ver=1.11.3). 
      If I just copy-paste a new jQuery to the section where I use the plugin, it works. But it's probably a very bad idea to load jQuery two times. 

      Can I override the old version of jQuery in functions.php and use a new version like 1.9?  
      Does it have issues with Pagelines or WordPress in general? Why is the version of jQuery that's used with WordPress so old?

      Thank you!
    • leeresources
      By leeresources+
      I keep getting this error :
      Uncaught TypeError: Cannot use 'in' operator to search for 'length' in                                                  jquery.js?ver=1.11.3:2
      r                                  @ jquery.js?ver=1.11.3:2 m.extend.each            @ jquery.js?ver=1.11.3:2 (anonymous function) @ pl.optpanel.js?ver=7ab9c7:283 m.extend.each            @ jquery.js?ver=1.11.3:2 (anonymous function) @ pl.optpanel.js?ver=7ab9c7:282 m.event.dispatch         @ jquery.js?ver=1.11.3:4 m.event.add.r.handle  @ jquery.js?ver=1.11.3:4  
      I have looked at a lot of resolved issues on these forums and nothing has been able to work.
      My changes are not saved after i hit publish and refresh, all the changes I've made disappear. 
      Also i am not able to add backgrounds or any images to the entire site, Rivslider, Quickslider, etc.
    • ipitts
      By ipitts+
      To whom it may concern:
      I am developing a website for a client using the PageLines DMS2 theme and am having an issue getting a custom jQuery function to work using your Hooker plugin. I have used Hooker to add HTML and PHP to the wp_head hook successfully, so I do not understand where the issue exists – I am using the pageslines_after_footer hook to place my jQuery at the bottom of the document (alongside the many other scripts that come with the theme and various other plugins). I checked the document HEAD section and know that jQuery is enabled, and after enabling my custom hook saw that my script was loaded into the footer (as hoped for), but it is not working.
      I am trying to make a simple, custom back-to-top button that appears after a user has scrolled the page a certain distance, as calculated in jQuery. After an hour, I decided to troubleshoot my script on a test WordPress site on my localhost (using jQuery version 1.11.3) and it works exactly as intended. I would like to avoid writing any code within the DMS2 theme files if possible.
      I have also tried the wp_head, wp_footer and pagelines_before_footer hooks to no avail. Am I using the wrong hook(s)? What else can I try?
      My code:
      HTML
      <a href="#"><div id="bttb-cont" style="">Hello</div></a>
       
      jQuery (within the Hooker plugin)
      <script type="text/javascript">
                      $(document).scroll(function() {
                                      var windowHeight = $(window).height() / 7;
                                      var scroll = $(window).scrollTop();
                                      
                                      if (scroll > windowHeight) {
                                                      $('#bttb-cont').fadeIn();
                                      } else {
                                                      $('#bttb-cont').fadeOut();
                                      };
                      });
      </script>
       
      As you can see, it is a very simple script.. Any help on this matter will be greatly appreciated.
       
×