"Hover`a" po najechaniu na nazwę/element
![[Obrazek: screeniwg.png]](http://imageshack.us/photo/my-images/707/screeniwg.png/)
Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
Można jaśniej? To jest po hiszpańsku a tego języka się nie uczyłem/uczę.. :<
Ehh, wklejasz kod 1 i 3 czyli te:
I tera jakbyś np. chciał dodać po najechaniu myszką opis to dodajesz taki kod:
I tak samo robisz z opisami, kapujesz?
<link rel="stylesheet" type="text/css" href="css/tipTip.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jscripts/jquery.tipTip.js"></script>
<script type="text/javascript" src="jscripts/jquery.tipTip.minified.js"></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery(".ejemplo").tipTip({maxWidth: "auto", edgeOffset: 10,gravity: 'n'});
});
</script><img src="#" class="ejemplo />Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
Nie za bardzo. :/
Te kody mam dodać do headerinclude
A z tym co?
I skąd ta klasa? ejemplo*?
Te kody mam dodać do headerinclude
<link rel="stylesheet" type="text/css" href="css/tipTip.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jscripts/jquery.tipTip.js"></script>
<script type="text/javascript" src="jscripts/jquery.tipTip.minified.js"></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery(".ejemplo").tipTip({maxWidth: "auto", edgeOffset: 10,gravity: 'n'});
});
</script>A z tym co?
<img src="#" class="ejemplo />
Zmieniłem link w 2 poście tam na samym końcu masz, co dalej masz zrobić.
Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
To ja sobie chyba to podaruję. Koliduje mi się to z panelem co w wyniku daje to że nie wysuwa się ten panel. :/
A czy pobrałeś i wrzuciłeś pliki do katalogu jscripts w głównym katalogu forum?
Jak nie to dodaje załącznik.
Jak nie to dodaje załącznik.
Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
Wrzuciłem. Usunąłem bibliotekę którą dodaje ten kod i nie koliduje już panelu. Lecz nadal nie działa. :<
A ten poradnik zrobiłeś?
https://webboard.pl/thread-36416.html
https://webboard.pl/thread-36416.html
Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
Mój headerinclude:
Tak zawsze stosuje się do tego "poradnika".
@Chyba że mam to tak samo zastosować w plikach .js?
Tak one wyglądają:
jquery.tipTip.js
jquery.tipTip.minified.js
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar_2.0.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
{$stylesheets}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/
jQuery.noConflict();
jQuery(document).ready(function($)
{
// Make the jQuery modal login redirect you back to the page you're currently on //
jQuery('#loginModal input[name="url"]').attr("value", window.location);
// /Login redirect //
// Modal Boxes //
jQuery('a[name="modal"]').on('click', function(event)
{
event.preventDefault();
var target = $(this).attr('rel');
// Set up the shadowing
var maskHeight = $(document).height();
var maskWidth = $(window).width();
jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
jQuery('#mask').fadeIn(1000);
jQuery('#mask').fadeTo("slow", 0.8);
// Position the actual modal
var winH = jQuery(window).height();
var winW = jQuery(window).width();
jQuery(target).css('top', (winH / 2) - ($(target).height() / 2));
jQuery(target).css('left', (winW / 2) - ($(target).width() / 2));
jQuery(target).fadeIn(2000);
});
jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
{
event.preventDefault();
jQuery('#mask, .modalBox').hide();
});
jQuery('#mask').on('click', function ()
{
jQuery(this).hide();
jQuery('.modalBox').hide();
});
// /Modal Boxes //
});
</script>
<script src="{$mybb->settings['bburl']}/jscripts/hide.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: ' ',// the button text to show when a div is closed
hideText: ' ' // the button text to show when a div is open
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/tipTip.css">
<script type="text/javascript" src="jscripts/jquery.tipTip.js"></script>
<script type="text/javascript" src="jscripts/jquery.tipTip.minified.js"></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery(".ejemplo").tipTip({maxWidth: "auto", edgeOffset: 10,gravity: 'n'});
});
</script>@Chyba że mam to tak samo zastosować w plikach .js?
Tak one wyglądają:
jquery.tipTip.js
(function($){
$.fn.tipTip = function(options) {
var defaults = {
activation: "hover",
keepAlive: false,
maxWidth: "200px",
edgeOffset: 3,
defaultPosition: "bottom",
delay: 400,
fadeIn: 200,
fadeOut: 200,
attribute: "title",
content: false, // HTML or String to fill TipTIp with
enter: function(){},
exit: function(){}
};
var opts = $.extend(defaults, options);
// Setup tip tip elements and render them to the DOM
if($("#tiptip_holder").length <= 0){
var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
var tiptip_content = $('<div id="tiptip_content"></div>');
var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
} else {
var tiptip_holder = $("#tiptip_holder");
var tiptip_content = $("#tiptip_content");
var tiptip_arrow = $("#tiptip_arrow");
}
return this.each(function(){
var org_elem = $(this);
if(opts.content){
var org_title = opts.content;
} else {
var org_title = org_elem.attr(opts.attribute);
}
if(org_title != ""){
if(!opts.content){
org_elem.removeAttr(opts.attribute); //remove original Attribute
}
var timeout = false;
if(opts.activation == "hover"){
org_elem.hover(function(){
active_tiptip();
}, function(){
if(!opts.keepAlive){
deactive_tiptip();
}
});
if(opts.keepAlive){
tiptip_holder.hover(function(){}, function(){
deactive_tiptip();
});
}
} else if(opts.activation == "focus"){
org_elem.focus(function(){
active_tiptip();
}).blur(function(){
deactive_tiptip();
});
} else if(opts.activation == "click"){
org_elem.click(function(){
active_tiptip();
return false;
}).hover(function(){},function(){
if(!opts.keepAlive){
deactive_tiptip();
}
});
if(opts.keepAlive){
tiptip_holder.hover(function(){}, function(){
deactive_tiptip();
});
}
}
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
tiptip_holder.hide().removeAttr("class").css("margin","0");
tiptip_arrow.removeAttr("style");
var top = parseInt(org_elem.offset()['top']);
var left = parseInt(org_elem.offset()['left']);
var org_width = parseInt(org_elem.outerWidth());
var org_height = parseInt(org_elem.outerHeight());
var tip_w = tiptip_holder.outerWidth();
var tip_h = tiptip_holder.outerHeight();
var w_compare = Math.round((org_width - tip_w) / 2);
var h_compare = Math.round((org_height - tip_h) / 2);
var marg_left = Math.round(left + w_compare);
var marg_top = Math.round(top + org_height + opts.edgeOffset);
var t_class = "";
var arrow_top = "";
var arrow_left = Math.round(tip_w - 12) / 2;
if(opts.defaultPosition == "bottom"){
t_class = "_bottom";
} else if(opts.defaultPosition == "top"){
t_class = "_top";
} else if(opts.defaultPosition == "left"){
t_class = "_left";
} else if(opts.defaultPosition == "right"){
t_class = "_right";
}
var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
var left_compare = (tip_w + left) > parseInt($(window).width());
if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
t_class = "_right";
arrow_top = Math.round(tip_h - 13) / 2;
arrow_left = -12;
marg_left = Math.round(left + org_width + opts.edgeOffset);
marg_top = Math.round(top + h_compare);
} else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
t_class = "_left";
arrow_top = Math.round(tip_h - 13) / 2;
arrow_left = Math.round(tip_w);
marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
marg_top = Math.round(top + h_compare);
}
var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
if(t_class == "_top" || t_class == "_bottom"){
t_class = "_top";
} else {
t_class = t_class+"_top";
}
arrow_top = tip_h;
marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
} else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
if(t_class == "_top" || t_class == "_bottom"){
t_class = "_bottom";
} else {
t_class = t_class+"_bottom";
}
arrow_top = -12;
marg_top = Math.round(top + org_height + opts.edgeOffset);
}
if(t_class == "_right_top" || t_class == "_left_top"){
marg_top = marg_top + 5;
} else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
marg_top = marg_top - 5;
}
if(t_class == "_left_top" || t_class == "_left_bottom"){
marg_left = marg_left + 5;
}
tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
if (timeout){ clearTimeout(timeout); }
timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
}
function deactive_tiptip(){
opts.exit.call(this);
if (timeout){ clearTimeout(timeout); }
tiptip_holder.fadeOut(opts.fadeOut);
}
}
});
}
})(jQuery);
jquery.tipTip.minified.js
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
Nie wiem, może spróbuj zamiast trzymać te pliki tipTip w katalogu jscripts to utwórz w swoim stylu nowy folder o nazwie np. js i wklej te pliki TipTip oraz zamień kod headerinclude na ten:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1603"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar_2.0.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
{$stylesheets}
<script type="text/javascript">
<!--
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/
jQuery.noConflict();
jQuery(document).ready(function($)
{
// Make the jQuery modal login redirect you back to the page you're currently on //
jQuery('#loginModal input[name="url"]').attr("value", window.location);
// /Login redirect //
// Modal Boxes //
jQuery('a[name="modal"]').on('click', function(event)
{
event.preventDefault();
var target = $(this).attr('rel');
// Set up the shadowing
var maskHeight = $(document).height();
var maskWidth = $(window).width();
jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
jQuery('#mask').fadeIn(1000);
jQuery('#mask').fadeTo("slow", 0.8);
// Position the actual modal
var winH = jQuery(window).height();
var winW = jQuery(window).width();
jQuery(target).css('top', (winH / 2) - ($(target).height() / 2));
jQuery(target).css('left', (winW / 2) - ($(target).width() / 2));
jQuery(target).fadeIn(2000);
});
jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
{
event.preventDefault();
jQuery('#mask, .modalBox').hide();
});
jQuery('#mask').on('click', function ()
{
jQuery(this).hide();
jQuery('.modalBox').hide();
});
// /Modal Boxes //
});
</script>
<script src="{$mybb->settings['bburl']}/jscripts/hide.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 0, // if you dont want the button text to change, set this to 0
showText: ' ',// the button text to show when a div is closed
hideText: ' ' // the button text to show when a div is open
});
});
</script>
<link rel="stylesheet" type="text/css" href="{$theme['imgdir']}/js/tipTip.css">
<script type="text/javascript" src="{$theme['imgdir']}/js/jquery.tipTip.js"></script>
<script type="text/javascript" src="{$theme['imgdir']}/js/jquery.tipTip.minified.js"></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery(".ejemplo").tipTip({maxWidth: "auto", edgeOffset: 10,gravity: 'n'});
});
</script>Cytat:It's all about the details.---------------
PW tylko forum, nie mejl.
To nic nie zmieni.. Tak czy siak to będą te same pliki .js więc nawet nie ma po co próbować..
OK ogarnąłem to! Tylko teraz jak wejdę np. w panel użytkownika (rozwijany mój) to wszędzie mam (przy hoverze) "Testowe" "profil" albo "Dział nie zawiera nowych postów"...
L: Tester
H: test123
@Już chyba wiem o co chodzi. Chodzi o to że nie mam wgranych "tytułów" które się wyświetlają po najechaniu na dany element.
L: Tester
H: test123
@Już chyba wiem o co chodzi. Chodzi o to że nie mam wgranych "tytułów" które się wyświetlają po najechaniu na dany element.
Użytkownicy przeglądający ten wątek:
2 gości