Marwa Soft http://www.marwasoft.com PHP , AJAX , MYSQL, wordpress ,vbulletin Wed, 03 Aug 2011 14:36:31 +0000 en hourly 1 http://wordpress.org/?v= كيفيه عمل راديو اونلاين بأستخدام jquery و jplayer http://www.marwasoft.com/blog/archives/524 http://www.marwasoft.com/blog/archives/524#comments Wed, 03 Aug 2011 14:24:36 +0000 mirosoft http://www.marwasoft.com/?p=524 النهارده و بمناسبة شهر رمضان اعادة الله على الامة الاسلامية بالخير و البركة هشرح طريقة عمل راديو للقرآن الكريم اونلاين بأستخدام jquery and jplayer

أول حاجه هنصمم قاعده بيانات و نضع بها هذا الجدول

  1.  
  2. CREATE TABLE `quran` (
  3.   `q_id` int(11) NOT NULL AUTO_INCREMENT,
  4.   `url` varchar(500) NOT NULL,
  5.   `artist` varchar(250) NOT NULL,
  6.   `title` varchar(250) NOT NULL,
  7.   PRIMARY KEY (`q_id`)
  8. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

ثم نملىء الجدول بالبيانات

  1. INSERT INTO `quran` (`q_id`, `url`, `artist`, `title`) VALUES ('', 'http://live.islamweb.net/quran/baset/jalsah_warsh/001-116.mp3', ' name', 'name');
  2. INSERT INTO `quran` (`q_id`, `url`, `artist`, `title`) VALUES ('', 'http://live.islamweb.net/quran/baset/jalsah_warsh/123.mp3', 'Another ', 'Another');
  3. INSERT INTO `quran` (`q_id`, `url`, `artist`, `title`) VALUES ('', 'http://live.islamweb.net/quran/baset/jalsah_warsh/126-2.mp3', 'One more ', 'One more ');

ادخل على هذا الرابط و خذ نسخه من jplayer
http://jplayer.org/
فك الضغط و ضعه على السيرفر الخاص بك
ثم ننشأ صفحة demo.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  2. <html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
  3. <head>
  4.  <title>راديو اونلاين</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  
  7.  <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
  8.  
  9.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  10.  <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14.  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  15.   <div class="jp-audio">
  16.    <div class="jp-type-single">
  17.        <div id="jp_interface_1" class="jp-interface">
  18.      <ul class="jp-controls">
  19.       <li><a href="#" class="jp-play" tabindex="1">play</a></li>
  20.       <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
  21.       <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
  22.       <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
  23.       <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
  24.      </ul>
  25.  
  26.      <div class="jp-progress">
  27.       <div class="jp-seek-bar">
  28.        <div class="jp-play-bar"></div>
  29.       </div>
  30.      </div>
  31.  
  32.      <div class="jp-volume-bar">
  33.       <div class="jp-volume-bar-value"></div>
  34.      </div>
  35.  
  36.      <div class="jp-current-time"></div>
  37.      <div class="jp-duration"></div>
  38.     </div>
  39.  
  40.     <div id="jp_playlist_1" class="jp-playlist">
  41.      <ul>
  42.       <li><strong id="artist">Artist</strong> – <span id="name"> name</span></li>
  43.      </ul>
  44.     </div>
  45.    </div>
  46.   </div>
  47.  </div>
  48. </body>
  49.  
  50. </html>

هناخذ نسخه من http://justinvincent.com/ezsql

و هنكتب الكود الى هيقرا من قاعده البيانات

لمشاهدة المثال اضغط هنا

]]> http://www.marwasoft.com/blog/archives/524/feed 2 أجمل فورمة تسجيل دخول باستخدام CSS3 http://www.marwasoft.com/blog/archives/490 http://www.marwasoft.com/blog/archives/490#comments Wed, 27 Jul 2011 15:32:32 +0000 mirosoft http://www.marwasoft.com/?p=490

 

من اجمل الفورم المستخدمه فيها حركة جميله باستخدام css3 و jquery

نضع هذا الكود مابين <head>    </head>

  1. <script type="text/javascript">// <![CDATA[
  2.    $(function(){     var $form_inputs =   $('form input');     var $rainbow_and_border = $('.rain, .border');     /* Used to provide loping animations in fallback mode */     $form_inputs.bind('focus', function(){      $rainbow_and_border.addClass('end').removeClass('unfocus start');     });     $form_inputs.bind('blur', function(){      $rainbow_and_border.addClass('unfocus start').removeClass('end');     });     $form_inputs.first().delay(800).queue(function() {    $(this).focus();     });   });
  3. // ]]></script>

كود الاستايل

body{
  1.     background: #000;
  2.     color: #DDD;
  3.     font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
  4.    }
  5.    .border,
  6.    .rain{
  7.     height: 170px;
  8.     width: 320px;
  9.    }
  10.    /* Layout with mask */
  11.    .rain{
  12.      padding: 10px 12px 12px 10px;
  13.      -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  14.      -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  15.      box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
  16.      margin: 100px auto;
  17.    }
  18.    /* Artifical "border" to clear border to bypass mask */
  19.    .border{
  20.     padding: 1px;
  21.     -moz-border-radius: 5px;
  22.        -webkit-border-radius: 5px;
  23.     border-radius: 5px;
  24.    }
  25.  
  26.    .border,
  27.    .rain,
  28.    .border.start,
  29.    .rain.start{
  30.     background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
  31.     /* Blue-ish Green Fallback for Mozilla */
  32.     /* Add "Highlight" Texture to the Animation */
  33.      background-color: #39f;
  34.    background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));/* Starting Color */
  35.     }
  36.  
  37.    /* Non-keyframe fallback animation */
  38.    .border.end,
  39.    .rain.end{
  40.     -moz-transition-property: background-position;  
  41.     -moz-transition-duration: 30s;
  42.     -moz-transition-timing-function: linear;
  43.     -webkit-transition-property: background-position;  
  44.     -webkit-transition-duration: 30s;  
  45.     -webkit-transition-timing-function: linear;
  46.     -o-transition-property: background-position;  
  47.     -o-transition-duration: 30s;  
  48.     -o-transition-timing-function: linear;
  49.     transition-property: background-position;  
  50.     transition-duration: 30s;  
  51.     transition-timing-function: linear;
  52.     background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
  53.    }
  54.  
  55.    /* Keyfram-licious animation */
  56.    @-webkit-keyframes colors {
  57.        0% {background-color: #39f;}
  58.        15% {background-color: #F246C9;}
  59.        30% {background-color: #4453F2;}
  60.        45% {background-color: #44F262;}
  61.        60% {background-color: #F257D4;}
  62.        75% {background-color: #EDF255;}
  63.        90% {background-color: #F20006;}
  64.        100% {background-color: #39f;}
  65.       }
  66.       .border,.rain{
  67.        -webkit-animation-direction: normal;
  68.        -webkit-animation-duration: 20s;
  69.        -webkit-animation-iteration-count: infinite;
  70.        -webkit-animation-name: colors;
  71.        -webkit-animation-timing-function: ease;
  72.       }
  73.  
  74.       /* In-Active State Style */
  75.    .border.unfocus{
  76.     background: #333 !important;
  77.      -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  78.      -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  79.      box-shadow: 0px 0px 15px rgba(255,255,255,.2);
  80.      -webkit-animation-name: none;
  81.    }
  82.    .rain.unfocus{
  83.     background: #000 !important;
  84.     -webkit-animation-name: none;
  85.    }
  86.  
  87.    /* Regular Form Styles */
  88.    form{
  89.     background: #212121;
  90.     -moz-border-radius: 5px;
  91.     -webkit-border-radius: 5px;
  92.        border-radius: 5px;
  93.     height: 100%;
  94.     width: 100%;
  95.     background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
  96.     background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
  97.    }
  98.    form label{
  99.     display: block;
  100.     padding: 10px 10px 5px 15px;
  101.     font-size: 11px;
  102.     color: #777;
  103.    }
  104.    form input{
  105.     display: block;
  106.     margin: 5px 10px 10px 15px;
  107.     width: 85%;
  108.     background: #111;
  109.     -moz-box-shadow: 0px 0px 4px #000 inset;
  110.     -webkit-box-shadow: 0px 0px 4px #000 inset;
  111.     box-shadow: 0px 0px 4px #000 inset;
  112.     outline: 1px solid #333;
  113.     border: 1px solid #000;
  114.     padding: 5px;
  115.     color: #444;
  116.     font-size: 16px;
  117.    }
  118.    form input:focus{
  119.     outline: 1px solid #555;
  120.     color: #FFF;
  121.    }
  122.    input[type="submit"]{
  123.     color: #999;
  124.     padding: 5px 10px;
  125.     float: right;
  126.     margin: 20px 0;
  127.     border: 1px solid #000;
  128.     font-weight: lighter;
  129.     -moz-border-radius: 15px;
  130.        -webkit-border-radius: 15px;
  131.     border-radius: 15px;
  132.     background: #45484d;
  133.     background: -moz-linear-gradient(top, #222 0%, #111 100%);
  134.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
  135.     filter: progid :D XImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
  136.     -moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
  137.     -webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
  138.     box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
  139.     text-shadow: 0 1px 1px #000;
  140.    }

اضف هذا الكود بعد

  1. <div class="rain">
  2. <div class="border start"><form><label for="email">Email</label> <input type="text" name="email" /> <label for="pass">Password</label> <input type="password" name="pass" /> <input type="submit" value="LOG IN" /></form>&nbsp;
  3.  
  4. </div>
  5.  
  6.  
  7. </div>

لا يعمل هذا الاسكربت على الفيرفوكس يمكنك مشاهدته على الكروم او السفارى

لمشاهدة الاسكربت اضغط هنا

مروة سوفت

]]> http://www.marwasoft.com/blog/archives/490/feed 3 هاك أضافة تحذير للمواضيع القديمة للنسخ vb4 تعريب مروة سوفت http://www.marwasoft.com/blog/archives/482 http://www.marwasoft.com/blog/archives/482#comments Tue, 21 Dec 2010 09:06:07 +0000 mirosoft http://www.marwasoft.com/?p=482 وظيفة الهاك:
الهاك عبارة عن أضافة جملة تحذيرية للمواضيع القديمة لمساعده الاعضاء لفهم ان المعلومات الموجوده فى الموضوع ليست حديثة
يمكنك تحديد عدد الايام ثم بعدها ستظهر هذه الجملة التحذيرية
يمكنك ايضا كتابة الجملة التحذيرية كما تريد و تغيريها حسب ما تريد عند اختيارك من الاستايل >>>تحذير مخصص
يعمل على النسخ ابتدأ من 4.1.0




تركيب الهاك:
1.أرفع الصورة الموجوده بالمجلد upload/images/misc
الى المنتدى
2.استيراد الهاك product_Warning_old_Thread.xml
3.عدل فى خيارات الهاك من اعدادت-الخيارات-هاك اضافة تحذير للمواضيع القديمة

تعريب :marwasoft.com

تحميل الهاك من هنا

]]> http://www.marwasoft.com/blog/archives/482/feed 0 تقطيع mp3 أونلاين دون استخدام برامج http://www.marwasoft.com/blog/archives/477 http://www.marwasoft.com/blog/archives/477#comments Fri, 17 Dec 2010 19:57:17 +0000 mirosoft http://www.marwasoft.com/?p=477 يمكنك الان تقطيع mp3 أونلاين بدون استخدام برامج لعمل نغمة للجوال او تقطيع اى مقطع mp3 تريده بسهولة
الخطوه الاولى:تحميل المقطع mp3 او الاغنيه ستسغرق بضعه ثوانى للتحميل على حسب الحجم
الخطوة الثانية :ملء البيانات اسم الاغنيه و اسم المطرب
الخطوة الثالثه : اضغط على زرار التقطيع


ثم تفتح صفحه لتحديد مسار الاغنيه او المقطع الموسيقى اختار بدايه و نهاية الاغنيه ثم اضغط process

بعد التقطيع تذهب الى صفحه بها النغمه يمكنك تحميلها على جهازك و نقلها على جوالك

http://www.marwasoft.com/cutmp3

]]> http://www.marwasoft.com/blog/archives/477/feed 0 35 أضافة للوردبريس لمشاركة التدوينات http://www.marwasoft.com/blog/archives/442 http://www.marwasoft.com/blog/archives/442#comments Sat, 06 Nov 2010 12:23:52 +0000 mirosoft http://www.marwasoft.com/?p=442 يمكنك مشاركة تدويناتك بعدة طرق باستخدام واحده من هذه الاضافات التى تجعل مدونتك اكثر شعبية

1.Sociable

التحميل

2.Bookmark Me

التحميل

3.Bookmarkify

التحميل

4.ShareThis

التحميل

5.PingPressFM

التحميل

6.obsocialbookmarker

التحميل

7.iBegin Share

التحميل

8.I Love Social Bookmarking

التحميل

9.Social Bookmarking RELOADED

التحميل

10.Social Bookmarks
التحميل

11.Social Dropdown

التحميل

12.SociBook
التحميل

13.SocioFluid
التحميل

14.WP PunchCard
التحميل

15.
ComplexLife
التحميل

16.Follow Me

التحميل

17.LifeStream
التحميل

18.Meet Your Commenters

التحميل

19.Retaggr

التحميل

20.SezWho
التحميل

21.Social Homes
التحميل

22.Digg Digg
التحميل

23.Digg This
التحميل

24.DiggZ-Et
التحميل

25.Dugg Widget
التحميل

26.FriendFeed Activity Widget
التحميل

27.FriendFeed Comments WordPress Plugin
التحميل

28.Stumble Reviews
التحميل

29.Twitter Updater
التحميل

30.WordPress Twitter Widget
التحميل

31.WP-Profilactic
التحميل

32.Hocus Pocus Buttons
التحميل

33.
KnxDT Bookmarks
التحميل

34.Gregarious
التحميل

35.Hey Social
التحميل

المصدر:marwa soft

]]> http://www.marwasoft.com/blog/archives/442/feed 1 اكتب كلمة عن طريق ماتريكس بالجافا سكربت http://www.marwasoft.com/blog/archives/428 http://www.marwasoft.com/blog/archives/428#comments Wed, 13 Oct 2010 07:49:02 +0000 mirosoft http://www.marwasoft.com/?p=428

لعمل حركة الماتريكس لكتابة كلمة فى نهاية الماتركس
ضع هذا الكود فى الصفحه فى head

  1. <style type="text/css">
  2. .matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;}
  3. </style>
  4.  
  5. <script type="text/javascript" language="JavaScript">
  6.  
  7. <!–
  8. var rows=11; // must be an odd number
  9. var speed=50; // lower is faster
  10. var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
  11. var effectalign="default" //enter "center" to center it.
  12.  
  13. var w3c=document.getElementById && !window.opera;;
  14. var ie45=document.all && !window.opera;
  15. var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
  16. var m_coch=new Array();
  17. var m_copo=new Array();
  18. window.onload=function() {
  19.  if (!w3c && !ie45) return
  20.   var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
  21.   ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
  22.   ma_txt=" "+ma_txt+" ";
  23.   columns=ma_txt.length;
  24.   if (w3c) {
  25.     while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
  26.     ma_tab=document.createElement("table");
  27.     ma_tab.setAttribute("border", 0);
  28.     ma_tab.setAttribute("align", effectalign);
  29.     ma_tab.style.backgroundColor="#000000";
  30.     ma_bod=document.createElement("tbody");
  31.     for (x=0; x<rows; x++) {
  32.       ma_row=document.createElement("tr");
  33.       for (y=0; y<columns; y++) {
  34.         matemp=document.createElement("td");
  35.         matemp.setAttribute("id", "Mx"+x+"y"+y);
  36.         matemp.className="matrix";
  37.         matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
  38.         ma_row.appendChild(matemp);
  39.       }
  40.       ma_bod.appendChild(ma_row);
  41.     }
  42.     ma_tab.appendChild(ma_bod);
  43.     matrix.appendChild(ma_tab);
  44.   } else {
  45.     ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
  46.     for (var x=0; x<rows; x++) {
  47.       ma_tab+='<t'+'r>';
  48.       for (var y=0; y<columns; y++) {
  49.         ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'">&nbsp;</'+'td>';
  50.       }
  51.       ma_tab+='</'+'tr>';
  52.     }
  53.     ma_tab+='</'+'table>';
  54.     matrix.innerHTML=ma_tab;
  55.   }
  56.   ma_cho=ma_txt;
  57.   for (x=0; x<columns; x++) {
  58.     ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
  59.     m_copo[x]=0;
  60.   }
  61.   ma_bod=setInterval("mytricks()", speed);
  62. }
  63.  
  64. function mytricks() {
  65.   x=0;
  66.   for (y=0; y<columns; y++) {
  67.     x=x+(m_copo[y]==100);
  68.     ma_row=m_copo[y]%100;
  69.     if (ma_row && m_copo[y]<100) {
  70.       if (ma_row<rows+1) {
  71.         if (w3c) {
  72.           matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
  73.           matemp.firstChild.nodeValue=m_coch[y];
  74.         }
  75.         else {
  76.           matemp=document.all["Mx"+(ma_row-1)+"y"+y];
  77.           matemp.innerHTML=m_coch[y];
  78.         }
  79.         matemp.style.color="#33ff66";
  80.         matemp.style.fontWeight="bold";
  81.       }
  82.       if (ma_row>1 && ma_row<rows+2) {
  83.         matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
  84.         matemp.style.fontWeight="normal";
  85.         matemp.style.color="#00ff00";
  86.       }
  87.       if (ma_row>2) {
  88.           matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
  89.         matemp.style.color="#009900";
  90.       }
  91.       if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
  92.       else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
  93.       else if (ma_row<rows+2) m_copo[y]++;
  94.       else if (m_copo[y]<100) m_copo[y]=0;
  95.     }
  96.     else if (Math.random()>0.9 && m_copo[y]<100) {
  97.       m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
  98.       m_copo[y]++;
  99.     }
  100.   }
  101.   if (x==columns) clearInterval(ma_bod);
  102. }
  103.  
  104. function zoomer(ycol) {
  105.   var mtmp, mtem, ytmp;
  106.   if (m_copo[ycol]==Math.floor(rows/2)+1) {
  107.     for (ytmp=0; ytmp<rows; ytmp++) {
  108.       if (w3c) {
  109.         mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
  110.         mtmp.firstChild.nodeValue=m_coch[ycol];
  111.       }
  112.       else {
  113.         mtmp=document.all["Mx"+ytmp+"y"+ycol];
  114.         mtmp.innerHTML=m_coch[ycol];
  115.       }
  116.       mtmp.style.color="#33ff66";
  117.       mtmp.style.fontWeight="bold";
  118.     }
  119.     if (Math.random()<reveal) {
  120.       mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
  121.       ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
  122.     }
  123.     if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
  124.     m_copo[ycol]+=199;
  125.     setTimeout("zoomer("+ycol+")", speed);
  126.   }
  127.   else if (m_copo[ycol]>200) {
  128.     if (w3c) {
  129.       mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
  130.       mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]–)+"y"+ycol);
  131.     }
  132.     else {
  133.       mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
  134.       mtem=document.all["Mx"+(200+rows-m_copo[ycol]–)+"y"+ycol];
  135.     }
  136.     mtmp.style.fontWeight="normal";
  137.     mtem.style.fontWeight="normal";
  138.     setTimeout("zoomer("+ycol+")", speed);
  139.   }
  140.   else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
  141.   if (m_copo[ycol]>100 && m_copo[ycol]<200) {
  142.     if (w3c) {
  143.       mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
  144.       mtmp.firstChild.nodeValue=String.fromCharCode(160);
  145.       mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]–)+"y"+ycol);
  146.       mtem.firstChild.nodeValue=String.fromCharCode(160);
  147.     }
  148.     else {
  149.       mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
  150.       mtmp.innerHTML=String.fromCharCode(160);
  151.       mtem=document.all["Mx"+(100+rows-m_copo[ycol]–)+"y"+ycol];
  152.       mtem.innerHTML=String.fromCharCode(160);
  153.     }
  154.     setTimeout("zoomer("+ycol+")", speed);
  155.   }
  156. }
  157. // –>
  158. </script>

ثم ضع هذا الكود فى body

  1. <div id="matrix">Marwa Soft</div>

لمشاهدة مثال من هنا

المصدر :مروة سوفت

]]> http://www.marwasoft.com/blog/archives/428/feed 2 فوتورايت للكتابة على الصور اونلاين باللغة العربية http://www.marwasoft.com/blog/archives/423 http://www.marwasoft.com/blog/archives/423#comments Sat, 09 Oct 2010 14:26:10 +0000 mirosoft http://www.marwasoft.com/?p=423 موقع فوتورايت للكتابة على الصور بدون تحميل برامج على جهازك
اول موقع للكتابة على الصور عربى
هناك العديد من المواقع للكتابة على الصور و لكنها مواقع اجنبية
تسمح لك الكتابة بالعربية فة القليل منها و الاخرى لا تسمح للكتابة باللغه العربية

يمكنك من موقع فوتورايت اختيار الصوره المعبره عن مودك و مشاعرك و الكتابة عليها باللون الخط الى يناسبك و نوع الخط
و ايضا يمكنك اختيار المكان للكتابه على الصوره اذا كان فى اعلى الصوره او الوسط او اسفل الصورة
الموقع من برمجتى يارب يعجبكم
و هناك اشياء اخرى فى التطوير انتظروها
http://www.fotowrite.marwasoft.com/
المصدر :مروة سوفت

]]> http://www.marwasoft.com/blog/archives/423/feed 4 تكبير جزء من الصورة عند تحريك الماوس عليه http://www.marwasoft.com/blog/archives/416 http://www.marwasoft.com/blog/archives/416#comments Tue, 05 Oct 2010 09:15:31 +0000 mirosoft http://www.marwasoft.com/?p=416

طريقه جميله لتكبير جزء معين من الصورة عند تحريك الماوس على هذا الجزء
اولا ضع هذا الكود فى هيدر الصفحه ما بين

  1. <style type="text/css">
  2.  
  3. .magnifyarea{ /* CSS to add shadow to magnified image. Optional */
  4. box-shadow: 5px 5px 7px #818181;
  5. -webkit-box-shadow: 5px 5px 7px #818181;
  6. -moz-box-shadow: 5px 5px 7px #818181;
  7. filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
  8. background: white;
  9. }
  10.  
  11. </style>
  12.  
  13. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  14.  
  15. <script type="text/javascript" src="featuredimagezoomer.js">
  16.  
  17. </script>
  18.  
  19. <script type="text/javascript">
  20.  
  21. jQuery(document).ready(function($){
  22.  
  23.  $('#image1').addimagezoom({
  24.   zoomrange: [3, 10],
  25.   magnifiersize: [300,300],
  26.   magnifierpos: 'right',
  27.   largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<– No comma after last option!
  28.  })
  29.  
  30.  $('#image2').addimagezoom({
  31.   zoomrange: [5, 5],
  32.   magnifiersize: [400,400],
  33.   magnifierpos: 'right',
  34.   largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<– No comma after last option!
  35.  })
  36.  
  37.  $('#image3').addimagezoom()
  38.  
  39. })
  40.  
  41. </script>

هيكون عندنا 3 صور
image1
image2
image3

هنكتب فى الصفحه نفسها

  1. <p><img id="image1" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>
  2.  
  3. <p><img id="image2" border="0" src="http://i44.tinypic.com/9ie1ib.jpg" style="width:300px;height:225px" /><p>
  4.  
  5. <p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>

احفظ الصفحه .html

تنزيل ملف الجافا featuredimagezoomer.js
صورة التحميل

المصدر:marwasoft

]]> http://www.marwasoft.com/blog/archives/416/feed 0 هل JQuery حلت محل الفلاش؟؟ كارت متحرك باستخدام JQuery http://www.marwasoft.com/blog/archives/411 http://www.marwasoft.com/blog/archives/411#comments Tue, 24 Aug 2010 21:00:19 +0000 mirosoft http://www.marwasoft.com/?p=411 سنه 1996 اطلقت شركة ميكروميديا منتجها و هو الفلاش و الغرض منه عمل انيميشن باستخدام timeline
لكن النهارده هنشوف ازاى JQuery تقدر على تحريك الصور

كود html

  1. <div id="wrapper">
  2.   <div id="content">
  3.    <div id="sun"><img src="images/sun.gif"/></div>
  4.    <div id="cloud1"><img src="images/cloud1.png"></div>
  5.    <div id="cloud2"><img src="images/cloud2.png"></div>
  6.    <div id="cloud3"><img src="images/cloud3.png"></div>
  7.    <div id="raft"><img src="images/raft.png"></div>
  8.    <div id="raftripple"><img src="images/raftripple.gif"></div>
  9.    <div id="greetings"><img src="images/greetings.png"></div>
  10.    <div id="stamp"><img src="images/stamp.png"></div>
  11.   </div>
  12.  </div>

كود CSS

  1.  *{ margin:0; padding:0; }
  2.      body { text-align: center; background: #111; }
  3.    #wrapper{ margin:0px auto; width:700px; }
  4.   #content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
  5.    #sun{ position:absolute; top:10px; left:30px; }
  6.    
  7.    #cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
  8.    #cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
  9.    #cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }
  10.    
  11.    #raft{ position:absolute; top:220px; left: 312px; z-index:20; }
  12.    #raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }
  13.    
  14.    #greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
  15.    #stamp{ position:absolute; top:5px; left: 801px; z-index:21; }

كود الجافا

  1. <script src="jquery.easing.1.3.js" type="text/javascript"></script>
  2.  <script type="text/javascript">
  3.   $(document).ready(function() {
  4.    setTimeout("animation()",300);
  5.   });
  6.  
  7.   function animation(){
  8.    sun_raft();
  9.    cloud1();
  10.    cloud2();
  11.    cloud3();
  12.    $("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
  13.    $("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
  14.   }
  15.    
  16.   function sun_raft(){
  17.    $("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000);
  18.    $("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);
  19.    $("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
  20.    setTimeout("sun_raft()",2000);
  21.   }
  22.   function cloud1(){
  23.    $("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0)
  24.    setTimeout("cloud1()",10000);
  25.   }
  26.   function cloud2(){
  27.    $("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
  28.    setTimeout("cloud2()",9000);
  29.   }
  30.   function cloud3(){
  31.    $("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
  32.    setTimeout("cloud3()",6000);
  33.   }
  34.  
  35.  </script>

لمشاهده الكارت المتحرك من هنا

المصدر :marwa soft

]]> http://www.marwasoft.com/blog/archives/411/feed 2 رسالة فى اعلى الصفحه باستخدام jQuery http://www.marwasoft.com/blog/archives/405 http://www.marwasoft.com/blog/archives/405#comments Tue, 24 Aug 2010 00:37:25 +0000 mirosoft http://www.marwasoft.com/?p=405 معظم مربع الرسائل message alert بيظهر فى منتصف الصفحه او على هيئة popup
النهارده هنشوف شكل تانى من ظهور الرسائل على الصفحه يمكن غلقها


كود Html للرسالة

  1.  <div id="message_box"><img id="close_message" style="float:right;cursor:pointer"  src="12-em-cross.png" />مرحبا بكم فى موقع مروة سوفت</div>

طبعا وضعنا الرسالة فى div و ليها خصائص معينه
كود css

  1. #message_box {
  2. position: absolute;
  3. top: 0; left: 0;
  4. z-index: 10;
  5. background:#ffc;
  6. padding:5px;
  7. border:1px solid #CCCCCC;
  8. text-align:center;
  9. font-weight:bold;
  10. width:99%;

ما ننساش ننادى صفحه jquery

  1. <script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>


لتجربة الصفحه من هنا

لتحميل الاسكربت من هنا

المصدر:marwa soft

]]> http://www.marwasoft.com/blog/archives/405/feed 0