Jump to content

sweetysweety

Members
  • Posts

    54
  • Joined

  • Last visited

Everything posted by sweetysweety

  1. cause i have to use vimeo video. my main purpose is to show video. but when video is ended,a black screen appearing and it looks not good for some people. that's why i want to put image at the end of video.
  2. is there any other way to do this? maybe i can count seconds of video and append image after that seconds. can i do it like this?
  3. i tried to control the video is ended and show image at the end of video but it did not work. besides dont mad on me please:) for a big probability i used wrong code at the wrong place.i'm always doing this:)
  4. but apple did this. i just want to show the image,that i putted before the video is also should be seen after the video ended.i mean when video is stopped,iframe should be hidden and img should be visible.
  5. hi, <div id="videoContent" style="display:none"></div> <img src="imajlar/PlayerPlay.png" id="playerPic" style="margin-top:52px; margin-left:322px;"/> my structure is like above.my jquery is: $("#playerPic").on("click",function(){$("#videoContent").append('<iframe width="900" height="350" id="vimeo" src="http://player.vimeo.com/video/41763950?api=1&player_id=player&force_embed=1&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00adef&fullscreen=1&autoplay=1&loop=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>');$("#playerPic").hide();$("iframe#vimeo").remove();$("#playerPic").show(); }); i'm trying to do that when video is stopped or paused,the image that i identified before will take place above the video.actually when video is stopped or paused,iframe should be hidden and image should be seen.how can i do this?
  6. go back icon should be seen at the right bottom corner of sliden panel.when you click at the map button,it's opacity will became .you should see that icon.its color is grey so maybe you cannot see because of that.
  7. i mean that the icon that i draw a blue circle on it in the picture.that circle doesn't exist on web page.i just take a screenshot the page and specify with the blue circle that i wanted. i solved a big part of my question.just some other problem appeared.first i put my code because i will not explain my problem. $(function() { child_frame = window.frames['iletisimSayfasi'].document; $('div #maps a',child_frame).live({ click:function(){ $("#goBack").css('visibility','visible').stop().animate({opacity:1},2000,"swing"); } }); $("#goBack a").live({ click:function(){ $("#goBack").css('visibility','hidden').stop().animate({opacity:0},2000,"swing"); } }); }); in here,i reach from my index page to iframe.i wrote a css and animate method to my iframe element's click event.when user click that button,an image appearing to my index page. when user clicks that image on the index page,the iframe that having another page is loading at its first loaded situation. my problem is when i click at the second time to this buttons,same issues are not happening again.i used toggle method but it did not solve my problem. that's my new problem.is there any other solution for this?
  8. you mean this: $(function() { var offset,center,width,newCenter=3; $mainNav1 = $("#point"); $mainNav1.append("<li id='red'></li>"); var $redPoint = $("#red"); $redPoint .width($redPoint.width()) .height($redPoint.height()) $("#menuButtons .menuItem a").live({ click:function() { $(window).resize(function(){ offset=$(this).offset(); width=$(this).width(); center=(offset.left+width/2)-newCenter; $redPoint.stop().animate({left:center}); window.setTimeout('location.reload()'); }); } }); }); or this: $(function() { var offset,center,width,newCenter=3; $mainNav1 = $("#point"); $mainNav1.append("<li id='red'></li>"); var $redPoint = $("#red"); $redPoint .width($redPoint.width()) .height($redPoint.height()) $(window).resize(function(){ $("#menuButtons .menuItem a").live({ click:function() { offset=$(this).offset(); width=$(this).width(); center=(offset.left+width/2)-newCenter; $redPoint.stop().animate({left:center}); } }); window.setTimeout('location.reload()'); });}); i try either way but it didn't work.i put location to my path of jquery code but it didn't work too. i search on the internet and some examples uses function for it.do i have to use function for it?
  9. hi,i have a web page like in the figure.it is a page inside another page.when user clicks the blue circled button,google map is appearing.when user clicks this button an icon have id of goBack became visible on the right corner of sliden panel.when the user clicks goBack button,the page comes to its first position,where blur panel on it.i try some codes but it is not doing that i wanted.here is my website http://www.terranartworks.com/testsite/tsv1/index.html
  10. i don't want reload page.i just want to slide right or left the redpoint as the browser width change. for example the page loaded and then i click first button on bottom of page. the red point will comes to the middle of that button. then i reduce the width of browser. the red point stays the first position. but the button is repositioned. so if the red point stays on first location that it placed,this means that it is not staying on the middle of button. like http://www.terranartworks.com/testsite/tsv1/islerimiz.html as you see,i changed browser size and red point stays at the right of second button.i don't want to see this attitude.i want to reposition red point at the middle of second button again.
  11. hi,i have a website like:http://www.terranartworks.com/testsite/tsv1/i want to do that repositioning red point,when browser size has changed.i mean that think about you clicked one of 3 buttons on bottom.red point comes sliding and position at the middle of button.then you reduce the width of browser.the red point is stays at the first position.but it should reposition according to reduced amount.how can i do this with jquery?
  12. hi,i have a website:http://www.terranartworks.com/testsite/tsv1/the script that named (magicline)example is not working except ff.i tested this site latest versions of chrome,opera,ff,safari and ie of version 8 to 10.
  13. yeap.it worked:)thank you for your help:)
  14. i want to see when i hover on the grey button on the bottom,the little pictures should appears upper side of releated button. i can reach most of my wishes but when i hover the first button,the last button's image appearing. how can i fix this?
  15. hi i wrote a code like this: $(function(){$(".ei-slider-thumbs li").live({ 'mouseenter':function(){ $(".ei-slider-thumbs li img").css('visibility','visible').stop().animate({opacity:1,bottom:'20px'},{duration:400,easing:'swing'}); }, 'mouseleave':function(){ $(".ei-slider-thumbs li img").css('visibility','hidden').stop().animate({opacity:0,bottom:'57px'},{duration:400,easing:'swing'}); } });}); it shows picture when i hover on them but i have image standing on li's and i have more than one li's.i want to see the releated image when i hover on that.i try to write a code like: $(".ei-slider-thumbs li").live({ 'mouseenter':function(){ var index=$(".ei-slider-thumbs li").index($(this)); $(".ei-slider-thumbs li img").find('eq('+index+')').css('visibility','visible').stop().animate({opacity:1,bottom:'20px'},{duration:400,easing:'swing'}); }, 'mouseleave':function(){ var index=$(".ei-slider-thumbs li").index($(this)); $(".ei-slider-thumbs li img").find('eq('+index+')').stop().animate({opacity:0,bottom:'57px'},{duration:400,easing:'swing'}); } }); but it did not do anything.can anyone help me what i'm doing wrong?
  16. hi,my website is: http://www.terranartworks.com/testsite/tsv1/index.htmli have some issues acting different for different browsers.1.the red panel appearing under the grey buttons on bottom,seems only ff,not other browsers.2.when user clicks one of grey buttons on the bottom,red panel should start under the white panel.but it starts a little bit of its left side.3. the white panel on the left side on islerimiz.html(which user clicks middle button on bottom) page should be blurred.i added script for this but it is not doing blurring thing.the same script is on the iletisim.html(which user clicks rightest button on bottom) page and it is working truly.ie6 errors:1.the red point seems as a rectangle.2.red panel script is not working.3.the background of page and the logo's background should be the same but they seems different4.the blurred panel on islerimiz.html page is not appearing at all.the bottom buttons seems true but the active button's color should be black but it seems grey too.besides little pictures should appear when mouse hover on the grey buttons,appears on open position.5.the blurred panel on iletisim.html is not appearing.the pictures on the blured panel appears with shadows and shape is rectangle.also the links on that pictures is not clickable.how can i solve this problems with css.if i couldn't solve with css,i can try jquery but my first choice is css.i have more than one javascript library on index page.but if i remove one of them,some scripts is not working.
  17. yeap it worked:))thank you so much for your help. i have file structure for everything so my image path is strange.actually the designer department gives name for images:)
  18. ok.i changed switch case but i don't want to use switch case for this. i want to do that on islerimiz page,when i every click on grey buttons on bottom,the article appearing on the blurred panel on left side will be change according to its releated picture. i mean: <div class="islerimiz"> <img id="icerikPic1" src="imajlar/ISLERGORSELLER/1/1-bilgiler.png" alt="islerimizTanım"/> </div> i want to change src of this img tag when i click on: <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li><a href="#" >Slide 1</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li> <li><a href="#" >Slide 2</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li> <li><a href="#" >Slide 3</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li> <li><a href="#" >Slide 4</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li> <li><a href="#" >Slide 5</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li> <li><a href="#" >Slide 6</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li> <li><a href="#">Slide 7</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li> <li><a href="#">Slide 8</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb08" /></li> <li><a href="#">Slide 9</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb09" /></li> <li><a href="#">Slide 10</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb10" /></li> </ul> every a tags of this list items.and the src of the img inside islerimiz div change according to its src.for example if the page was 1st picture and user clicks 4th picture link,the src of img tag inside of div will be:imajlar/ISLERGORSELLER/4/4-bilgiler.png then while picture seen on the picture was 5th picture and then when user click 10th picture,the src of img tag inside div tag will be: imajlar/ISLERGORSELLER/10/10-bilgiler.png thats the problem i want to solve
  19. hi.i have a website like:http://www.terranartworks.com/testsite/tsv1/islerimiz.htmli want to change the sources of images,which stays on the white panel,at every click of the grey buttons at the bottom.i did this with switch case but it does this only one click.another clicks they don't.i want to identify only one image tag and change the source according to button.i mean only the xxx part will change according to index comes from button:imajlar/ISLERGORSELLER/xxx/xxx-bilgiler.pngi don't know can i explain my problem.how can i do this?
  20. no when i clicked those thumbnails,the larger pictures comes with sliden effect.i want to do a panel like http://www.terranartworks.com/testsite/tsv1/iletisim.html i mean the picture which lies under the panel seems blurred. i apply box shadow and filter effect to the white panel but it did not blurred.
  21. the picture lays under the panel should be blurred when panel is on the picture.that's what i wanted.while white panel is an open position,the picture that sliden with the button should seems blurred.but only part of panel lays.
  22. hi, i have a site like:http://www.terranartworks.com/testsite/tsv1/islerimiz.html the panel on the right side is not blurring,although i added it.i don't figure out how.can anyone explain me why? i actually have another problem about content of my blurred panel.i want to do that,when user click one of buttons on the bottom,an information will appear on the blurred panel.i think that should be with jquery.i call a click event for buttons and every click a new img will appending on the blurred panel.how can i call append function for every different button click?
  23. http://www.terranartworks.com/testsite/tsv1/islerimiz.html i will put this site in another site with iframe tag.that page is:http://www.terranartworks.com/testsite/tsv1/index.html as you see in this site,i have to decrease height of blurred panel to the beginning of bottom buttons and remove the scroll.besides i added blur script but it is not blurred the pictures.
  24. <html><head><style type="text/css">body {background: none repeat scroll 0 0 #FFFFFF;color: #000000;font-family: 'Open Sans Condensed',sans-serif;font-size: 13px;}a {color: #555555;text-decoration: none;}a:hover {color: #000000;}.ei-slider {height: 400px;margin: 0 auto;max-width: 1920px;position: relative;width: 100%;}.ei-slider-loading {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);color: #FFFFFF;height: 100%;left: 0;line-height: 400px;position: absolute;text-align: center;top: 0;width: 100%;z-index: 999;}.ei-slider-large {height: 100%;overflow: hidden;position: relative;width: 100%;}.ei-slider-large li {height: 100%;left: 0;overflow: hidden;position: absolute;top: 0;width: 100%;}.ei-slider-large li img {width: 100%;}.ei-title {margin-right: 13%;position: absolute;right: 50%;top: 30%;}.ei-title h2, .ei-title h3 {text-align: right;}.ei-title h2 {color: #B5B5B5;font-family: 'Playfair Display',serif;font-size: 40px;font-style: italic;line-height: 50px;}.ei-title h3 {color: #000000;font-family: 'Open Sans Condensed',sans-serif;font-size: 70px;line-height: 70px;text-transform: uppercase;}.ei-slider-thumbs {height: 13px;margin: 0 auto;position: relative;}.ei-slider-thumbs li {float: left;height: 100%;position: relative;}.ei-slider-thumbs li.ei-slider-element {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);height: 100%;left: 0;position: absolute;text-indent: -9000px;top: 0;z-index: 10;}.ei-slider-thumbs li a {background: none repeat scroll 0 0 #666666;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 1px rgba(255, 255, 255, 0.5);cursor: pointer;display: block;height: 100%;text-indent: -9000px;transition: background 0.2s ease 0s;width: 100%;}.ei-slider-thumbs li a:hover {background-color: #F0F0F0;}.ei-slider-thumbs li img {bottom: 50px;max-width: 100%;opacity: 0;position: absolute;transition: all 0.4s ease 0s;z-index: 999;}.ei-slider-thumbs li:hover img {bottom: 13px;opacity: 1;}.ei-title {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);bottom: 10px;margin-right: 0;padding: 5px 0;position: absolute;right: 0;text-align: center;top: auto;width: 100%;}.ei-title h2, .ei-title h3 {text-align: center;}.ei-title h2 {font-size: 20px;line-height: 24px;}.ei-title h3 {font-size: 30px;line-height: 40px;}ol, ul {list-style: none outside none;}h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}.islerimiz{ margin:0; -webkit-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset; -moz-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset; box-shadow:0 0 5px #CCC, 0 0 400px #fff inset; -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff')"; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff'); width:200px; /*height:315px;*/ height:350px; z-index:100000; cursor:default; overflow:hidden; } #acKapat{ z-index:10000000; }</style></head><body><div class="container"> <div id="acKapat"> <a href="#"> <img src="images/icon.png" height="20" width="20" alt="tanımPanelAcKapat"/></a></div><div class="islerimiz"></div><div class="wrapper"><div id="ei-slider" class="ei-slider"><ul class="ei-slider-large"><li><img src="images/ISLER GORSELLER/1/isler_gorsel1.jpg" alt="image01" /></li><li><img src="images/ISLER GORSELLER/2/isler_gorsel2.jpg" alt="image02" /></li><li><img src="images/ISLER GORSELLER/3/isler_gorsel3.jpg" alt="image03"/></li><li><img src="images/ISLER GORSELLER/4/isler_gorsel4.jpg" alt="image04"/></li><li><img src="images/ISLER GORSELLER/5/isler_gorsel5.jpg" alt="image05"/></li><li><img src="images/ISLER GORSELLER/6/isler_gorsel6.jpg" alt="image06"/></li><li><img src="images/ISLER GORSELLER/7/isler_gorsel7.jpg" alt="image07"/></li><li><img src="images/ISLER GORSELLER/8/isler_gorsel8.jpg" alt="image08" /></li><li><img src="images/ISLER GORSELLER/9/isler_gorsel9.jpg" alt="image09" /></li><li><img src="images/ISLER GORSELLER/10/isler_gorsel10.jpg" alt="image10" /></li></ul><ul class="ei-slider-thumbs"><li class="ei-slider-element">Current</li><li><a href="#" >Slide 1</a><img src="images/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li><li><a href="#" >Slide 2</a><img src="images/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li><li><a href="#" >Slide 3</a><img src="images/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li><li><a href="#" >Slide 4</a><img src="images/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li><li><a href="#" >Slide 5</a><img src="images/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li><li><a href="#" >Slide 6</a><img src="images/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li><li><a href="#">Slide 7</a><img src="images/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li><li><a href="#">Slide 8</a><img src="images/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb07" /></li><li><a href="#">Slide 9</a><img src="images/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb07" /></li><li><a href="#">Slide 10</a><img src="images/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb07" /></li></ul> </div> </div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script><script type="text/javascript" src="js/jquery.eislideshow.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/blur.dev.js"></script><script type="text/javascript">$(function() {$('#ei-slider').eislideshow({ easing : 'easeOutExpo', titleeasing : 'easeOutExpo', titlespeed : 1200});});</script><script type="text/javascript"> var origWidth=$(".islerimiz").width(); $('#acKapat').click(function(e){e.preventDefault();/*$(this).parent('.islerimiz').animate({'width': 0, 'opacity': 0 }, 'slow', 'linear' ,function(){window.location=$(this).find('a').attr('href');});*/ width=$(".islerimiz").width(); if(origWidth==width) $(".islerimiz").animate({'width': 0, 'opacity': 0 }, 'slow','swing'); else $(".islerimiz").animate({ 'width': '200px','opacity':1 }, 'slow','swing'); }); </script><script type="text/javascript"> $(document).ready(function(){ $('.islerimiz').blurjs({ draggable: false, overlay: 'rgba(255,255,255,0.1)', }); }); </script></body></html> i'm trying to do: <div id="acKapat"> <a href="#"> <img src="images/icon.png" height="20" width="20" alt="tanımPanelAcKapat"/></a></div><div class="islerimiz"></div> appears on the img that slides but the blurred panel is staying at the top of images.how can i solve this problem?
×
×
  • Create New...