login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Mouseover popup script werkt niet in div-indeling (Opgelost)

Offline Gust - 23/06/2014 17:22 (laatste wijziging 23/06/2014 17:25)
Avatar van GustMySQL interesse Bezoek eventjes pagina A
- pagina, opgebouwd met divs
- let op de main-pagina met de uitleg.

Bezoek nu pagina B
- ga met je cursor over de zangeres (popup scriptje)
- als je klikt, ga je naar beneden voor meer info

Nu zou ik beide pagina's willen combineren. Je zou zeggen: plaats pagina B in de main divs van pagina A.

Maar dan krijg ik deze combinatie (pagina C).
- de mouseover popups verschijnen niet meer.

Ik heb dit al proberen op te lossen met allerlei vormen van een iframe of php-include, maar ofwel kan ik niet scrollen, verdwijnt de css scrollbalk,... het is altijd iets.

Wie kan mij helpen?

14 antwoorden

Gesponsorde links
Offline Thomas - 23/06/2014 22:31 (laatste wijziging 23/06/2014 22:40)
Avatar van Thomas Moderator In scherm A gebruik je jQuery.
In scherm B gebruik je een andere JavaScript vorm.
In scherm C gebruik je beide en de combinatie lijkt niet te werken; waarschijnlijk zijn deze niet compatibel en mogelijk wordt het hover-event door jQuery gekaapt zodat dat prototype geval zijn ding niet kan doen?

Waarom gebruik je geen jQuery-tooltip/popup effect (heb je al in de jQuery ui library gezocht)? Daar zijn ongetwijfeld vele uitwerkingen van/voor.

NB: In scherm B komt het id "test" meerdere keren voor, wat mij sowieso niet goed lijkt.
Offline Gust - 23/06/2014 23:07
Avatar van Gust MySQL interesse Ik heb lang achter dit mouseover popup script gezocht, ik zou ook niet weten hoe je de verschillende javascript vormen kunt onderscheiden, want ik wist niet eens dat er verschillende vormen bestonden.
Offline Thomas - 24/06/2014 00:25 (laatste wijziging 24/06/2014 13:53)
Avatar van Thomas Moderator Waarom heeft je main content div trouwens een scrollbar, kom je hiermee niet vreselijk in de knoei met ruimte? :/

inspiratie: http://stackove...use-cursor (de titleClouds meuk, scroll naar onderen)
De jQuery UI kan meer, maar dit is redelijk lichtgewicht. Hier zou je op door kunnen bouwen maar positionering wordt wellicht lastig...

EDIT: eigen maaksel n.a.v. voorbeeld uit bovenstaande link:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!--
  2. inspired by http://stackoverflow.com/questions/8370425/append-div-to-the-mouse-cursor (titleClouds)
  3. //-->
  4. <!DOCTYPE html>
  7. <meta charset="utf-8">
  8. <style type="text/css">
  9. <!--
  10. #tooltip { display: none; position: absolute; z-index: 1; max-width:  320px; padding: 0; border: 1px solid #ff0000; background-color: #ffffff; }
  11.  
  12. /* comment to edit and display the HTML of your hover elements */
  13. #tooltipdata { display: none; }
  14. //-->
  16. <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
  17. <script type="text/javascript">
  18. //<![CDATA[
  19. elementtooltip = function() {
  20.     this.$tooltipdiv    = null;
  21.     this.$hoverelements = null;
  22.     this.$datadiv       = null;
  23.  
  24.     // position of tooltipdiv relative to mouse
  25.     this.posLeft        = 20;
  26.     this.posTop         = 20;
  27.  
  28.     this.init = function(options) {
  29.         this.$tooltipdiv    = $('#'+options.tooltipdiv);
  30.         this.$hoverelements = $(options.hoverelements);
  31.         this.$datadiv       = $('#'+options.datadiv);
  32.  
  33.         var that = this;
  34.         $(document).mousemove(function(e) {
  35.             // possibly constrain movement of div here, perhaps use jQuery's position functionality?
  36.             that.$tooltipdiv.css({'top': (e.pageY+that.posTop)+'px', 'left': (e.pageX+that.posLeft)+'px'});
  37.         });
  39.         this.$hoverelements.each(function() {
  40.             var title   = $(this).attr('title');
  41.             var data    = $(that.$datadiv).find('[data-id='+$(this).attr('data-ref')+']').html();
  42.             // extra: custom positioning
  43.             var pl      = 20;
  44.             var pt      = 20;
  46.             // does the element have custom pos?
  47.             if ($(this).is('[data-pos-left]')) {
  48.                 pl = parseInt($(this).attr('data-pos-left'));
  49.             }
  50.             if ($(this).is('[data-pos-top]')) {
  51.                 pt = parseInt($(this).attr('data-pos-top'));
  52.             }
  53.             $(this).hover(function() {
  54.                 // extra: custom positioning
  55.                 that.posLeft    = pl;
  56.                 that.posTop     = pt;
  57.                 that.$tooltipdiv.show().html(data);
  58.                 $(this).attr('title', '');
  59.             }, function() {
  60.                 that.$tooltipdiv.hide().html('');
  61.                 $(this).attr('title', title);
  62.             });
  63.         });
  64.     }
  65. }
  66. //]]>
  68. </head>
  69.  
  70. <body style="margin: 50px;">
  71. <!-- works on hyperlinks (use '#nav a' for hoverelements) -->
  72. <div id="nav">
  73.     <ul>
  74.         <li><a href="#" title="This is my title 1" data-ref="1">Link 1</a></li>
  75.         <li><a href="#" title="This is my title 2" data-ref="2">Link 2</a></li>
  76.         <li><a href="#" title="This is my title 3" data-ref="3">Link 3</a></li>
  77.     </ul>
  78. </div>
  79.  
  80. <!-- works for imagemap, or basically, any elements which can be hovered -->
  81. <img src="test.gif" width="960" usemap="#imageMap" ismap="ismap" />
  82. <map id="imageMap" name="#imageMap">
  83.     <area shape="rect" coords="72,174,180,437" href="#test" data-ref="1" data-pos-top="50" data-pos-left="50" />
  84.     <area shape="rect" coords="801,282,877,406" href="#test" data-ref="2" data-pos-left="-320" />
  85. </map>
  86.  
  87. <div id="tooltip"></div>
  88.  
  89. <div id="tooltipdata">
  90.     <div data-id="1">
  91.         <div style="padding: 10px;">
  92.         <p>lorem ipsum dolor sit on your face</p>
  93.         <ul>
  94.             <li>een</li>
  95.             <li>twee</li>
  96.             <li>drie</li>
  97.             <li>vier</li>
  98.         </ul>
  99.         </div>
  100.     </div>
  101.     <div data-id="2"><img src="test.gif" width="320" height="200" alt="image" style="float: left;" /></div>
  102.     <div data-id="3">drie</div>
  103. </div>
  104. <script type="text/javascript">
  105. //<![CDATA[
  106. $().ready(function() {
  107.    var tt = new elementtooltip();
  108.     tt.init({
  109.         'tooltipdiv':       'tooltip',
  110.         'hoverelements':    '#imageMap area', // or use #nav a
  111.         'datadiv':          'tooltipdata'
  112.     });
  113. });
  114. //]]>
  116. </body>
  117. </html>


Met deze semi-generieke code kun je:
- definieren op welke elementen gehoverd moet worden (en waar deze dus tooltips moet tonen)
- aangeven wat de naam van de (lege) tooltip-placeholder-div is
- aangeven welke div de container is van je tooltip-data; elk onderliggende div met een data-id property correspondeert met een data-ref property in je hover-elementen
- enigszins schuiven met de relatieve positieve van de tooltip ten opzichte van je muis; je kunt er natuurlijk altijd toe besluiten je tooltip op een vaste/statische plaats weer te geven zodat deze niet aan je muis plakt
Offline Gust - 24/06/2014 18:27 (laatste wijziging 27/06/2014 18:07)
Avatar van Gust MySQL interesse
FangorN schreef:
Waarom heeft je main content div trouwens een scrollbar, kom je hiermee niet vreselijk in de knoei met ruimte?


Dat is bewust gedaan omdat het mij mooier en voordeliger lijkt om zowel de hoofding (waarin de menu zit) als de voet in beeld te houden. Op die manier blijft je menu de hele tijd zichtbaar en moet je niet constant terug naar boven scrollen om op de menu te klikken.

De scrollbalk heeft trouwens een aparte CSS, waarvan het script te vinden is op http://n-son.com/jsScrollbar/ (Flexible containers). Dat script wordt niet meer supported waardoor ik met deze ontwikkelaar geen oplossing kan vinden.

Ik heb het even uitgetest, maar het blijft de scrollbalk die parten speelt. Zonder de scrollbalk werkt het .(zie pagina)

Ik heb beide Javascripten bij elkaar gebracht. Dit is nu het script:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <editor knip>


Dus het probleem ligt echt bij de scrollbalken. De goedkoopste oplossing is: scrollbalk weglaten. Maar wat met de andere pagina's? Dus ergens in die scrollbalken moet iets zitten wat conflicten geeft. Ik zoek het mee verder uit.

Heb het even bekeken. De oorzaak ligt in de css van de scrollbalk:
scrollbalk.css
regel 11: 'overflow: hidden'

Als ik deze wegneem dan wordt de vormgeving stopgezet en werkt de rest naar behoren. Maar ik wil de mooie vormgeving van de scrollbalk behouden. Iets anders achter de overflow zetten brengt geen oplossing.

Dus... bestaat er een alternatief voor die regel?
Offline Thomas - 24/06/2014 21:56 (laatste wijziging 24/06/2014 22:10)
Avatar van Thomas Moderator Uhm, heb je de bovenstaande code van mij geprobeerd, en jouw code voor je image-map hierdoor vervangen, zodat al je JavaScript van jQuery gebruik maakt? Want dat lijkt mij (toch) de oorzaak van je probleem.

Daarnaast: is de informatie van je footer belangrijker dan je content? Je zou ook kunnen besluiten om je header altijd bovenaan je pagina te tonen, zoals in dit script gebeurt.

Ik zou zeggen: probeer het eens door alle non-jQuery meuk eruit te gooien en een 100% jQuery oplossing te maken.
Offline Gust - 25/06/2014 00:27
Avatar van Gust MySQL interesse Oei, verkeerde code gepost :-)

Heb het geprobeerd met je code, bedankt voor die moeite. Maar de problemen blijven hetzelfde:
- met een include zie je het mouseover effect, maar zie je de scrollbalk niet
- met de code rechtstreeks in de pagina zie je de scrollbalk, maar werkt het mouse-over effect niet.

Ik probeer morgen verder.
Offline Thomas - 25/06/2014 16:51 (laatste wijziging 26/06/2014 00:45)
Avatar van Thomas Moderator Het werkt als je de volgende regels hanteert:

- plaats de tooltip en tooltipdata divs buiten elke andere div
- verwijder het complete window.onload-blok (regel 19 t/m 31) uit scrollbalk.js; er is ook iets voor te zeggen om dit NOOIT te doen in combinatie met jQuery, gebruik dan bij voorkeur een of meer $().ready(function() { ... }); blokken
- laad de content die je verwijderd hebt uit het window.onload-blok voordat je de elementtooltip aanmaakt, en binnen een .ready()-blok, dus als volgt:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. //<![CDATA[
  2. $().ready(function() {
  3.     // EERST je onLoad meuk
  4.     var scrollbar = jsScrollbar('#uitleg', {
  5.         horizontalScrolling: false,
  6.         scrollSpeed: 30
  7.     });
  8.     window.onresize = function () {
  9.         // IE 7 hack, wrap in a setTimeout call
  10.         setTimeout(function () {
  11.             scrollbar.recalc();
  12.             forceOperaRedraw(scrollbar);
  13.         }, 0);
  14.     };
  15.  
  16.     // DAN je tooltip-functionaliteit
  17.     var tt = new elementtooltip();
  18.     tt.init({
  19.         'tooltipdiv':       'tooltip',
  20.         'hoverelements':    '#map1 area', // use #imageMap area or #nav a
  21.         'datadiv':          'tooltipdata'
  22.     });
  23. });
  24. //]]>


Als je deze regels observeert lijkt het te werken, ik kan je een werkend voorbeeld sturen als je wilt.

Waarschijnlijk werkt dit stramien ook met je eigen tooltip-functionaliteit, maar die scrollbalk zooi gooit echt roet in het eten (en het leek inderdaad die ene CSS-regel, maar als je die verandert werkt je hele scrollbalk niet meer), persoonlijk zou ik die niet gebruiken.
Offline Gust - 27/06/2014 14:59
Avatar van Gust MySQL interesse Ik begrijp het niet helemaal. Mijn kennis is dan ook heel beperkt, maar doe mijn best om te ontcijferen wat je allemaal wilt zeggen.

- moet ik regel 19 t/m 31 vervangen door de code die je postte? De opmaak van de scrollbalk valt dan weg.

FangorN schreef:
plaats de tooltip en tooltipdata divs buiten elke andere div
En wat met <div id="tooltipdata"> ?

Misschien dat je inderdaad even dat werkend voorbeeld even stuurt?
Offline Thomas - 27/06/2014 15:16 (laatste wijziging 27/06/2014 18:08)
Avatar van Thomas Moderator Het voornaamste is denk ik dat de tooltip-div niet beïnvloed wordt door andere elementen waar deze in staat. Ook bij lightbox-achtige functionaliteit zie je vaak dat dit soort placeholder-divs achteraan in je document staat, direct onder je body-element.

Anyway, een werkend voorbeeld vond je (tijdelijk) hier. Let hierbij dus op de plaatsing van de elementen in het HTML-document en de gewijzigde structuur van js/scrollbalk.js.
Offline Gust - 27/06/2014 17:45
Avatar van Gust MySQL interesse Ah, nu zie ik wat je bedoelt. Bedankt! Nu werkt het zo ongeveer.

Er is in het werkend voorbeeld nog een klein probleem: bij de scrollbalk kun je naar beneden blijven doorscrollen, waarna je de gewone scrollbalken erbij krijgt.

Ik heb het uitgetest op deze pagina. Als je doorklikt op de mouseovers, dan ga je dmv een anker naar beneden, en ook dan verschijnen de scrollbalken.

Zou dat met die overflow: hidden te maken kunnen hebben?
Offline Thomas - 27/06/2014 18:04 (laatste wijziging 27/06/2014 18:11)
Avatar van Thomas Moderator Dat lijkt mij een eigenaardigheid van de scrollbalk-functionaliteit zelf in combinatie met een specifieke browser (Chrome toevallig?).

In Firefox lijkt het (nu) goed te gaan?

In Chrome kun je door blijven scrollen zolang je wilt, je krijgt dan een extra scrollbalk te zien.
En als je rechtstreeks naar de bookmark gaat (#test) krijg je automatisch extra scrollbalken.

In Internet Explorer lijkt alles goed te gaan.

Heb je vast kunnen stellen dat dit echt komt door mijn code, of dat dit hoe dan ook gebeurt?

Je zou kunnen proberen om in dat .ready() block altijd een scrollbar.recalc() te zetten, dan heb je een iets grotere zekerheid dat de goede hoogte wordt gebruikt?

Maar dit is al een andere vraag dan de oorspronkelijke en je loopt nu tegen (andere) problemen aan die waarschijnlijk inherent zijn aan hoe die scrollbar werkt... Als het teveel moeite kost, gebruik het dan niet .

EDIT: of gebruik iets anders / maak zelf iets.
Offline Gust - 27/06/2014 22:05
Avatar van Gust MySQL interesse Het gebeurt ook alleen als je de pagina vernieuwt, dan zie je dat die scrollbalk iets korter wordt. Dus als je gewoon van pagina naar pagina gaat, dan heb je daar geen last van.

Hoe is dit vast te stellen: door te vergelijken met een andere website waar deze scrollbalk ook gebruikt wordt, en die in Chrome geen problemen oplevert. Toevallig ben ik bezig aan een andere website (in voorontwerp), die je hier kunt terugvinden.

Zelf iets maken: ooit zal dat wel komen als ik de nodige kennis vergaard heb en tijd genoeg heb.
Offline Thomas - 28/06/2014 13:00 (laatste wijziging 30/06/2014 10:50)
Avatar van Thomas Moderator Je vergelijkt verschillende dingen, in de eerste site "spring" je in je paginahoogte door een bookmark, in de tweede site scroll je gewoon door je content heen.

Je kunt het introduceren van extra scrollbalken oplossen door in css/opmaak.css de waarde van de overflow-property van #uitleg te veranderen naar hidden, deze stond op auto.

Daarnaast:
- de eerder gelinkte pagina van de ybb-site bevat een afsluitende </html>-tag teveel
- er zit nog debug in elementtooltip.js, verwijder de console.log() regel
- overige problemen met het rechtstreeks springen naar een bookmark bij het laden van je pagina in Chrome zijn verholpen als je dezelfde truuk toepast als bij het resizen van je browser, verander hiertoe je $().ready-blok naar het volgende:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. //<![CDATA[
  2. $().ready(function() {
  3.     // EERST je onLoad meuk
  4.     var scrollbar = jsScrollbar('#uitleg', {
  5.         horizontalScrolling: false,
  6.         scrollSpeed: 30
  7.     });
  8.  
  9.     // om zaken te repareren bij resizen
  10.     window.onresize = function () {
  11.         // IE 7 hack, wrap in a setTimeout call
  12.         setTimeout(function () {
  13.             scrollbar.recalc();
  14.             forceOperaRedraw(scrollbar);
  15.         }, 0);
  16.     };
  17.  
  18.     // om zaken te repareren bij het laden
  19.     setTimeout(function () {
  20.         scrollbar.recalc();
  21.         forceOperaRedraw(scrollbar);
  22.     }, 0);
  23.  
  24.     // DAN je tooltip-functionaliteit
  25.     var tt = new elementtooltip();
  26.     tt.init({
  27.         'tooltipdiv':       'tooltip',
  28.         'hoverelements':    '#map1 area', // use #imageMap area or #nav a
  29.         'datadiv':          'tooltipdata'
  30.     });
  31. });
  32. //]]>


Hier was je misschien zelf ook achtergekomen als je mijn advies had opgevolgd om scrollbar.recalc() altijd bij laden uit te voeren...

EDIT: nu lijkt, afhankelijk van waar je dit setTimeout blok plaatst, de pagina (in Firefox / Chrome) al dan niet niet automatisch naar de bookmark te springen (en in een andere opzet dan de huidige verdwijnt de scrollbar weer in Chrome)... Dat zou je ook nog met jQuery op kunnen lossen...
Offline Gust - 30/06/2014 11:55
Avatar van Gust MySQL interesse
FangorN schreef:
Je kunt het introduceren van extra scrollbalken oplossen door in css/opmaak.css de waarde van de overflow-property van #uitleg te veranderen naar hidden, deze stond op auto.


Fantastisch! Dat was het inderdaad! Heel erg bedankt voor de moeite!!!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s