معهد خبراء بلوجر - شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)

- طلبات الدعم الفني (https://www.bloggerexp.com/forumdisplay.php?f=12)

شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

السلام عليكم .

عند قيامي بإضافة شريط القوائم الجانبية الشهير التالي :

http://i.imgur.com/7zjD60C.jpg

و بحال وجود نافذة سلايدر ( jQuery - carousel) فإن عرض الصور المتسلسل داخل هذه النافذة يتوقف لصالح عمل ذاك الشريط الجانبي للشبكات الاجتماعية, أي أن هناك تعارض في عمل العنصرين, فما الحل لجعلهما يعملان معاً دون أن يؤثر أي منهما على الآخر ؟

و أيضاً لدي قائمة رئيسية ( jQuery - lavelamp ) يتوقف عمل نوافذها المنسدلة لصالح عمل السلايدر, فما الحل لها أيضاً ؟

و شكراً .

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

ممكن ترفع القالب أخي الكريم

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

شكراً على الرد أخي عثمان , هذا رابط تحميل القالب : http://www.mediafire.com/?m1b4xricm8xz3eu

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

يُرفع للضرورة ....

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

مضى أكثر من شهر و لم أتمكن بعد من ايجاد حل أو حتى تفسير لهذه المشكلة, فأرجو المساعدة ...

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أخي
جرب أولا الطريقة التي طرحتها للأخ بهذا الموضوع : تعديلات على قالب Evident
أقصد هذا الرد فيما يتعلق بالإضافة فهي خلقت مشكل تعارض مع tabbed widgets وقد حليتها بالطريقة الموضحة بالرد هنا

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

شكراً أخي عثمان. مع الأسف الطريقة لم تعمل لدي و بقيت المشكلة قائمة, أضيف القائمة الجانبية للأزرار فيتوقف السلايدر عن العمل .

فقد للتوضيح أكثر. لدي 3 عناصر أريد إضافتها للمدونة :
1 ) شريط menu bar
2 ) سلايدر بتقينة jQuery
3 ) شريط أزرار مواقع اجتماعية جانبي كاللذي في الصورة في مشاركتي الاولى و يعمل بتقنية jQuery أيضاً

أولاً أقوم بإضافة شريط الـ Menu bar و كوده :

كود:

<div class="container">



            <ul id="nav">

                <li><a href="http://www.bloggertrix.com/">Home</a></li>

                <li><a class="hsubs" href="#">Menu 1</a>

                    <ul class="subs">

                        <li><a href="#">Submenu 1</a></li>

                        <li><a href="#">Submenu 2</a></li>

                        <li><a href="#">Submenu 3</a></li>

                        <li><a href="#">Submenu 4</a></li>

                        <li><a href="#">Submenu 5</a></li>

                    </ul>

                </li>

                <li><a class="hsubs" href="#">Menu 2</a>

                    <ul class="subs">

                        <li><a href="#">Submenu 2-1</a></li>

                        <li><a href="#">Submenu 2-2</a></li>

                        <li><a href="#">Submenu 2-3</a></li>

                        <li><a href="#">Submenu 2-4</a></li>

                        <li><a href="#">Submenu 2-5</a></li>

                        <li><a href="#">Submenu 2-6</a></li>

                        <li><a href="#">Submenu 2-7</a></li>

                        <li><a href="#">Submenu 2-8</a></li>

                    </ul>

                </li>

                <li><a class="hsubs" href="#">Menu 3</a>

                    <ul class="subs">

                        <li><a href="#">Submenu 3-1</a></li>

                        <li><a href="#">Submenu 3-2</a></li>

                        <li><a href="#">Submenu 3-3</a></li>

                        <li><a href="#">Submenu 3-4</a></li>

                        <li><a href="#">Submenu 3-5</a></li>

                    </ul>

                </li>

                <li><a href="#">Menu 4</a></li>

                <li><a href="#">Menu 5</a></li>

                <li><a href="#">Menu 6</a></li>

                <li><a href="http://www.bloggertrix.com/">Back</a></li>

                <div id="lavalamp"></div>

            </ul>



        </div>

فيعمل بشكل سليم و تظهر قوائمه المنسدلة التي يمكن الضغط عليها للوصول إلى الصفحات الفرعية .

ثانياً أضيف السلايدر و كوده :

كود:

<script type='text/javascript'>

jQuery(document).ready(function(){var $box=jQuery('.post'),$bar=jQuery('a.bar_view');$dat=jQuery('a.dat_view');$dat.click(function(){$box.removeClass(&quot;bar&quot;);jQuery(this).addClass('active');$bar.removeClass('active');jQuery.cookie('dat_style',0);return false});$bar.click(function(){$box.addClass(&quot;bar&quot;);jQuery(this).addClass('active');$dat.removeClass('active');jQuery.cookie('dat_style',1);return false});if(jQuery.cookie('dat_style')==0){$box.removeClass(&quot;bar&quot;);$dat.addClass('active')}else{$box.addClass(&quot;bar&quot;);$bar.addClass('active')}});

</script>

<script type='text/javascript'>

  //<![CDATA[

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);

//]]>

</script>

و :

كود:

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>    

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

<script type='text/javascript'>

(function($) {     $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

    auto:4000,

    scroll: 1,

    speed: 800,    

    visible: 5,

    start: 0,

    circular: true,

    btnPrev: &quot;#previous_button&quot;,

    btnNext: &quot;#next_button&quot;

    });

    })})(jQuery)    

</script>

الآن تمت إضافة السلايدر و يعمل بشكل سليم لكن إضافته أدت لتوقف القوائم المنسدلة للـ Menu bar السابق عن العمل !

ثالثاً : إضافة شريط الأزرار الاجتماعية الجانبي :

كوده :

كود:

<style>

img,a {

border: 0;}

#on {

    visibility: visible;}

#off {

    visibility: hidden;}

#facebook_div {

    width: 196px;

    height: 340px;

    overflow: hidden;}

#twitter_div {

    width: 246px;

    height: 353px;

    overflow: hidden;}

#google_plus_div {

    width: 152px;

    height: 97px;

    overflow: hidden;

    margin-left: 50px;

    margin-top: 10px;}

#knfeedburner_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

    margin-top: 5px;

    margin-left: -4px;}

#kakinetwork_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

}/* right side style */#facebook_right {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    right: -200px;}

#facebook_right img {

    position: absolute;

    top: -2px;

    left: -35px;}

#facebook_right iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    left: -2px;

    top: -3px;}

#twitter_right {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    right: -250px;}

#twitter_right_img {

    position: absolute;

    top: -2px;

    left: -35px;

    border: 0;}

#google_plus_right {

    z-index: 10003;

    background-color: #F2F2F2;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-right: 2px solid #0056a0;

    border-left: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    right: -154px;}

#google_plus_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;}

#feedburner_right {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-right: 2px solid #5b5b5b;

    border-left: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    right: -303px;}

#feedburner_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;}

#kakinetwork_right {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;}

#kakinetwork_right img {

    position: absolute;

    top: -2px;

    left: -101px;

}/* left side style */#facebook_left {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    left: -200px;}

#facebook_left img {

    position: absolute;

    top: -2px;

    right: -35px;}

#facebook_left iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    right: -2px;

    top: -3px;}

#twitter_left {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    left: -250px;}

#twitter_left_img {

    position: absolute;

    top: -2px;

    right: -35px;

    border: 0;}

#google_plus_left {

    z-index: 10003;

    background-color: #006ec9;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-left: 2px solid #0056a0;

    border-right: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    left: -154px;}

#google_plus_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;}

#feedburner_left {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-left: 2px solid #5b5b5b;

    border-right: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    left: -303px;}

#feedburner_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;}

#kakinetwork_left {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;}

#kakinetwork_left img {

    position: absolute;

    top: -2px;

    right: -101px;}

.box-title1 {

    border: 1px solid #ddd;

/*border-radius*/

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

/*box-shadow*/

    -webkit-box-shadow: 5px 5px 5px #CCCCCC;

    -moz-box-shadow: 5px 5px 5px #CCCCCC;

    box-shadow: 5px 5px 5px #CCCCCC;

    padding: 10px;

    margin: 10px 0;}

.enteryouremail {

    background: #fff !important;

    border: 1px solid #d2d2d2;

    padding: 0px 8px 0px 8px;

    color: #a19999;

    font-size: 12px;

    height: 25px;

    width: 165px;

/*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    margin: 0px;}

.submitbutton {

    background: #F2F2F2;

    border: 1px solid #F66303;

/*box-shadow*/

    -webkit-box-shadow: 3px 3px 3px #666;

    box-shadow: 3px 3px 3px #666;

    font: bold 12px Arial, sans-serif;

    color: #000000;

    height: 25px;

    padding: 0 12px 0 12px;

    margin: 0 0 0 5px;

/*border-radius*/

    -webkit-border-radius: 5px;

    border-radius: 5px;

    cursor: pointer;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on">

 <div id="facebook_right" style="top: 18%;">

  <div id="facebook_div">

   <img src="http://2.bp.blogspot.com/-AwJK988Hw9U/T_CUbBXoLmI/AAAAAAAABuM/XIwgqyH0zLw/s1600/facebook-icon.png" alt=""/>

   <iframe src="//www.facebook.com/plugins/likebox.php?

href=http%3A%2F%2Fwww.facebook.com%2F&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">

   </iframe>

  </div>

 </div>

</div>

<div id="on">

 <div id="twitter_right" style="top: 35%;">

  <div id="twitter_div">

   <img id="twitter_right_img" src="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/s1600/twitter-icon.png"/>

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>

   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {****l: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})

.render().setUser('').start();</script>

  </div>

 </div>

</div>

<div id="on">

 <div id="google_plus_right" style="top: 52%;">

  <div id="google_plus_div">

   <img id="google_plus_right_img" src="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/s1600/google-plus-icon.png"/>

   <div style="float:left;margin:10px 10px 10px 0;">

    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>

   </div>

  </div>

 </div>

 <div id="on">

  <div id="feedburner_right" style=" top: 69%;">

   <div id="knfeedburner_div">

    <center>

    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/>

<input value="" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>

    </form>

    </center><img id="feedburner_right_img" src="http://3.bp.blogspot.com/-Kw-Vbf9fQ9U/T_CUdFKZUQI/AAAAAAAABuc/5FhLcDmWmuA/s1600/subscribe-icon.png"/>

   </div>

  </div>

 </div>

</div>

مع انتهاء الخطوة الثالثة تمت إضافة شريط الازرار الجانبية و تبين أنه يعمل بشكل سليم, لكن إضافته أدت إلى توقف السلايد عن العمل و بالمقابل عودة الـ Menu bar للعمل بقوائمه المنسدلة !

لا مشكلة في وجود الـ Menu bar و شريط الأزرار الاجتماعية الجانبي سوية, لكن وجود السلايدر في ظل وجودهما يجعله متوقف عن العمل !

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

هل جربت تضيف الأكواد في مفكرة وترفعها الى dropbox أو googlecode ؟

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

لا أخي لم أفكر في هذا الأمر , لكن ما المغزى من ذلك ؟

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

لا أعرف بالضبط لكن أظن أني استعملتها من قبل
جرب مع كود الأزرار لوحده في الأول ثم جرب بعدها الأكواد الأخرى
وإذا لم ينجح أخبرني حتى أنشئ محتوى بسيط أجرب عليه

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أخي تقصد أن أجرب القيام برفع الاكواد للعناصر المطلوبة إلى googlecode أو dropbox ؟

سأقوم برفع العناصر الثلاثة بشكل متتالي إلى googlecode , ابتداءاً بقائمة الازرار الجانبية, لكن ما الصيغة التي ينبغي علي حفظ ملف الجافا بها قبل رفعه إلى googlecode, و ما هي طريقة الربط بين الأكواد المرفوعة و المدونة ؟

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

ارفع فقط أكواد الجافا والملف احفظه بصيغة .js
<script type="text/javascript" src="رابط الملف"></script>

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

قمت بعمل مشروع جديد في ( googlecode ) من خلال التالي :

Create a new project ثم في Project name و Project summary وضعت اسماء عشوائية

في ( Version control system ) اخترت ( Subversion )

و من (Source code license ) اخترت ( GNU GPL v2 )

ثم create project

ثم downloads - new downloads , رفعت ملف الجافا و امتداده js بعد أن لصقت بداخله كود الازرار الاجتماعية كاملاً و أخذت رابط التحميل المباشرة و أضفته إلى الكود اللذي وضعته في مشاركتك السابقة أخي عثمان, على هذا النحو :

كود:

<script type="text/javascript" src="http://nemoz.googlecode.com/files/New%20Text%20Document%20%282%29.js"></script>

وضعت الكود السابق داخل القالب في منطقة أكواد Html تحت </head> ... النتيجة بعد التطبيق لم يظهر شريط الأزرار الجانبية مطلقاً !

حاولت مع كود السلايدر و طبقت نفس العملية السابقة و أضفته كرابط جافا بعد حذف كوده من القالب, فلم يظهر أيضاً !

أعتقد أن الطريقة لم تنفع معي في حال كان تطبيقي صحيحاً ...

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أضفني مشرف على المدونة عبر الايميل الذي أرسلت لك
لأني صراحة لم أفهم مشكلتك جيدا إذ أني أضفت الأزرار واشتغلت والقائمة المنسدلة شغالة
لكن السلايدر لم يشتغل عندي من الأساس

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

جرب غير لغة الموقع لو كان عربي سوية انجليزي لانو في اكواد ما بتعمل مع اللغة العربية

واذا كان الامور تمام بس عند وضع اكواد معينة يتوقفو او يتعارضو , جرب ضيفهم في نهاية القالب فوق
</body>

حصلت معي مره , وخليت اكواد في نهاية القالب بعد اكواد السلايد اشتغل

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

اقتباس:

المشاركة الأصلية كتبت بواسطة عثمان بن الطالب (المشاركة 26266)

أخي حاليا لا مدونة لدي انما اجري تجارب على القالب اللذي رفعته إلى هذا الموضوع . و ما قلته صحيح وجود قائمة الأزرار في القالب يوقف عمل السلايدر و بالوقت نفسه يعيد عمل القائمة المنسدلة إلى طبيعته . أما أزالة الشريط الجانبي للأزرار يعيد عمل السلايدر إلى طبيعته, و عودة عمل السلايدر تؤدي إلى توقف عمل القوائم المنسدلة بالنسبة لشريط القائمة الرئيسية .

أي ان حذفت السلايدر, حينها سأكسب عنصرين يعملان بشكل كامل, الشريط الجانبي و القائمة الرئيسية مع قوائمها المنسدلة.

اقتباس:

المشاركة الأصلية كتبت بواسطة 3li (المشاركة 26266)

أخي جربت أن أغير اللغة إلى الانكليزية و أيضاً جربت طريقة إضافة أكواد العناصر في الأسفل فوق </body> مباشرة, لم يتغير شيىء إلا أن السلايدر تغير موقعه إلى الأسفل و مع ذلك ظل متوفقاً عن العمل في ظل وجود قائمة الازرار الجانبية .

:(:

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

طيب أخي السلايدر كيف تفعله ؟

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أخي عثمان السلايدر مفعل تلقائياً في القالب اللذي وضعت رابطه في مشاركة سابقة ....

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

لكنه لا يشتغل معي عندي التركيب لهذا طلبت منك إضافتي إلى مدونتك التي تجرب عليها

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

تفضل أخي عثمان لمعاينة المشكلة بشكل عملي :

المدونة الاختبارية الأولى : http://teeest910.blogspot.com/

كما هو ملاحظ أني أضفت لها فقط السلايدر و شريط القائمة الرئيسية, و السلايدر يعمل بشكل سليم لكن القائمة الرئيسية تعمل بشكل منقوص, أي أن أزرار الأساسية تعمل, أما الفرعية بقوائمها المنسدلة فلا تعمل لصالح السلايدر .

----------------------------------------------------------------------------

المدونة الاختبارية الثانية : http://teeest911.blogspot.com/

حالها كالأولى لكن مع إضافة قائمة الأزرار الجانبية, و لاحظ أخي بعد إضافة هذه القائمة فقد توقف السلايدر عن العمل لصالح القائمة الجانبية, مع عودة القائمة الرئيسية للعمل بشكل كامل مع قوائمها المنسدلة .

و هذا رابط يحوي القالبين : http://www.mediafire.com/?9tkq1sk7t26pk6g

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

طيب أخي أرسل لي دعوة في المدونتين

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أضفتك أخي إلى المدونتين :

http://teeeest901.blogspot.com/

http://teeeest902.blogspot.com/

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

تم حل المشكلة
بالنسبة للأزرار أضفها في أداة HTML/JavaScript
أما بالنسبة لحل مشكلة ظهور القائمة خلف السلايدر ابحث عن :

كود بلغة HTML:

#nav ul {

ستجد :

كود بلغة HTML:

z-index: 2;

اجعلها :

كود بلغة HTML:

z-index: 10000;

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

أخي عثمان شكراً جزيلاً لك, تم حل المشكلة الاولى بخصوص اظهار القوائم المنسدلة للقائمة الرئيسية, أعتقد ان الرمز ( z-index: ) يشير إلى البعد الثالث في القائمة الرئيسية و المتمثل بالقوائم المنسدلة, لكن هل لي أن أعرف إلى ماذا يشير الرقم ( 10000 ) ؟

بخصوص المشكلة الثانية ففعلاً تم حلها أيضاً, و السبب الرئيسي على ما يبدو كان في كود القائمة الجانبية نفسه, الكود اللذي أضفته حضرتك إلى المدونة مختلف نوعاً ما عن الكود اللذي كنت استعمله ( كود html تحديداً ) , حتى اني تمكنت من إضافة كودك إلى القالب ( تحديداً فوق <div id='headerpic-wrapper'> ) دون الحاجة إلى إضافته كأداة أداة HTML/JavaScript و نجحت العملية ...

تحيتي و خالص امتناني لك أخي عثمان ...

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

بعد التدقيق تبين أن الكود اللذي كنت أستخدمه لاظهار الشريط الجانبي يزيد عن الكود اللذي أضفته أخي عثمان بـ ( <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> ) في أعلى كود الـ html, للأسف هذه الزيادة كانت كفيلة باحداث مشكلة توقف السلايدر عن التحرك بعد اضافة الشريط الجانبي !

أخي هناك مشكلة بسيطة كما تلاحظ في المدونة الاختبارية الأولى, زر الـ google +1 لا يعمل و يظهر :
TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog', 'skin', 'view']

http://teeeest901.blogspot.com/

هذا طبعاً لأني لم أضف كود الشريط الجانبي كأداة html و انما إلى القالب . فهل من حل لهذه المشكلة ؟

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

رد: شريط الأزرار الاجتماعية الجانبي يتعارض مع عمل السلايدر فما الحل !

فعلاً أخي مكتبة الجيكويري

كود:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

كانت مكررة في القالب, و بعد إزالتها من كود شريط الأزرار الجانبي تبين أن وجودها كان سبب توقف السلايدر عن العمل ...

بخصوص المشكلة الثانية فهي ليست مشكلة صراحة و لكن توقف عمل زر ( google +1 ) ضمن الشريط الجانبي في حال إضافة كود الـ html للشريط الجانبي ضمن القالب ( غالبا لان الزر يتعارض مع زر اخر موجود في القالب ), أما بإضافة كود الـ html كأداة html/java كما أشرت أخي عثمان فيتم حل المشكلة .

و شكراً