Jump to content

anutti

Newbie
 View Profile  See their activity

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Everything posted by anutti

  1. anutti
    вобщем нужно просто строку с mp4 писать второй а не первой как в примере.... Наверное наитупейшее решение, но у меня работает )
  2. anutti
    Добрый день! Подскажите, как сделать чтобы .mp4 проигрывался только в эксплорере, а в остальных браузерах webm? <video id="myVideo" width="320" height="176" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.webm" type="video/webm"> Your browser does not support HTML5 video.</video>Спасибо.
  3. anutti
    Что-то не получилось... видимо у меня руки кривые ( Я сделала как вверху, только пару моментов поправила, вроди работает но по коду конечно ужасно у меня выглядит . Все равно, Вам спасибо большое за помощь )
  4. anutti
    Спасибо за помощь, еще один вопрос, у меня на страничке 3 видео, а эта кнопка срабатывает только на первом, хотя я ID по разному называю Не знаю как сделать красивее код (пример для 2-х)... когда одно работает прекрасно а когда 3 только у последнего <video muted id="myVideo1" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play1">Play</button><video muted id="myVideo2" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play2">Play</button>_______<script>var video = document.getElementById('myVideo1');var playbutton = document.getElementById("play1");playbutton.addEventListener("click", function (e) { // Toggle between play and pause based on the paused property if (video.paused) { video.play(); } else { video.pause(); }}, false);video.addEventListener("play", function () { playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () { playbutton.innerHTML = "Play";}, false);</script><script>var video = document.getElementById('myVideo2');var playbutton = document.getElementById("play2");playbutton.addEventListener("click", function (e) { // Toggle between play and pause based on the paused property if (video.paused) { video.play(); } else { video.pause(); }}, false);video.addEventListener("play", function () { playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () { playbutton.innerHTML = "Play";}, false);</script>
  5. anutti
    Да спасибо большое! Все получилось )
  6. anutti
    не совсем поняла где это применить... <!DOCTYPE html> <html> <body> <button onclick="RunVideo()" id="playpause" type="button">Play</button><br><video muted id="myVideo" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4"type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg"type="video/ogg"> Your browser does not support HTML5 video.</video><script>var controls = { video: $("#myVideo"), playpause: $("#playpause") };function RunVideo() { var video = controls.video[0]; controls.playpause.click(function(){ if (video.paused) { video.play(); $(this).text("Pause"); } else { video.pause(); $(this).text("Play"); } $(this).toggleClass("paused"); });};</script> </body> </html> не работает (((
  7. anutti
    Добрый день! Подскажите как сделать запуск видео по отдельной кнопке ? Как и в этом примере (он для запуска и остановки звука) http://jsfiddle.net/248yc2jx/, мне нужно то же самое но для видео. Спасибо.
  8. anutti
    Спасибо большое ! )
  9. anutti
    Добрый день! Как в этом примере http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_muted сделать чтобы было не 2 кнопки а одна и текст на ней менялся, то есть когда звук работает отображалось Mute sound, а когда звук отключен Enable sound Спасибо. и как сделать чтобы изначально было без звука
  10. anutti
    Спасибо большое )
  11. anutti
    и еще, можно ли сделать чтобы информация и картинки в раскрывашках подгружались по их открытию, а не сразу со всей страницей ?
  12. anutti
    Добрый день, при нажатии на ссылку открывается некий блок, таких ссылок с блоками может быть несколько, как сделать чтобы при нажатии на любую другую закрытую ссылку предыдущий раскрытый блок сворачивался, а выбранный раскрывался? Вот пример http://jsfiddle.net/driver/PD3gk/light/ Спасибо.
  13. anutti
    да, текст сообщения почему-то не отображается ( вот еще раз ссылка текст дублирую... Скрипт рассчитывает высоту открываемого окошка в зависимости от высоты окна браузера, а мне нужно чтобы высота окошка равнялась высоте содержимого, у меня содержимое это картинка... Помогите, я уже по разному пыталась, ни чего не выходит. сам скрипт такой: /** debouncedresize: special jQuery event that happens once after a window resize** latest version and complete README available on Github:* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js** Copyright 2011 @louis_remi* Licensed under the MIT license.*/var $event = $.event,$special,resizeTimeout;$special = $event.special.debouncedresize = { setup: function() { $( this ).on( "resize", $special.handler ); }, teardown: function() { $( this ).off( "resize", $special.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments, dispatch = function() { // set correct event type event.type = "debouncedresize"; $event.dispatch.apply( context, args ); }; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } execAsap ? dispatch() : resizeTimeout = setTimeout( dispatch, $special.threshold ); }, threshold: 250};// ======================= imagesLoaded Plugin ===============================// https://github.com/desandro/imagesloaded// $('#my-container').imagesLoaded(myFunction)// execute a callback when all images have loaded.// needed because .load() doesn't work on cached images// callback function gets image collection as argument// this is the container// original: MIT license. Paul Irish. 2010.// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou// blank image data-uri bypasses webkit log warning (thx doug jones)var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';$.fn.imagesLoaded = function( callback ) { var $this = this, deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, hasNotify = $.isFunction(deferred.notify), $images = $this.find('img').add( $this.filter('img') ), loaded = [], proper = [], broken = []; // Register deferred callbacks if ($.isPlainObject(callback)) { $.each(callback, function (key, value) { if (key === 'callback') { callback = value; } else if (deferred) { deferred[key](value); } }); } function doneLoading() { var $proper = $(proper), $broken = $(broken); if ( deferred ) { if ( broken.length ) { deferred.reject( $images, $proper, $broken ); } else { deferred.resolve( $images ); } } if ( $.isFunction( callback ) ) { callback.call( $this, $images, $proper, $broken ); } } function imgLoaded( img, isBroken ) { // don't proceed if BLANK image, or image is already loaded if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { return; } // store element in loaded images array loaded.push( img ); // keep track of broken and properly loaded images if ( isBroken ) { broken.push( img ); } else { proper.push( img ); } // cache image and its state for future calls $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); // trigger deferred progress method if present if ( hasNotify ) { deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); } // call doneLoading and clean listeners if all images are loaded if ( $images.length === loaded.length ){ setTimeout( doneLoading ); $images.unbind( '.imagesLoaded' ); } } // if no images, trigger immediately if ( !$images.length ) { doneLoading(); } else { $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ // trigger imgLoaded imgLoaded( event.target, event.type === 'error' ); }).each( function( i, el ) { var src = el.src; // find out if this image has been already checked for status // if it was, and src has not changed, call imgLoaded on it var cached = $.data( el, 'imagesLoaded' ); if ( cached && cached.src === src ) { imgLoaded( el, cached.isBroken ); return; } // if complete is true and browser supports natural sizes, try // to check for image status manually if ( el.complete && el.naturalWidth !== undefined ) { imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); return; } // cached images don't fire load sometimes, so we reset src, but only when // dealing with IE, or image is complete (loaded) and failed manual check // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f if ( el.readyState || el.complete ) { el.src = BLANK; el.src = src; } }); } return deferred ? deferred.promise( $this ) : $this;};var Grid = (function() { // list of items var $grid = $( '#og-grid' ), // the items $items = $grid.children( 'li' ), // current expanded item's index current = -1, // position (top) of the expanded item // used to know if the preview will expand in a different row previewPos = -1, // extra amount of pixels to scroll the window scrollExtra = 0, // extra margin when expanded (between preview overlay and the next items) marginExpanded = -68, $window = $( window ), winsize, $body = $( 'html, body' ), // transitionend events transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], // support for csstransitions support = Modernizr.csstransitions, // default settings settings = { minHeight : 500, maxHeight : 840, speed : 350, easing : 'ease' }; function init( config ) { // the settings.. settings = $.extend( true, {}, settings, config ); // preload all images $grid.imagesLoaded( function() { // save item´s size and offset saveItemInfo( true ); // get window´s size getWinSize(); // initialize some events initEvents(); } ); } // add more items to the grid. // the new items need to appended to the grid. // after that call Grid.addItems(theItems); function addItems( $newitems ) { $items = $items.add( $newitems ); $newitems.each( function() { var $item = $( this ); $item.data( { offsetTop : $item.offset().top, height : $item.height() } ); } ); initItemsEvents( $newitems ); } // saves the item´s offset top and height (if saveheight is true) function saveItemInfo( saveheight ) { $items.each( function() { var $item = $( this ); $item.data( 'offsetTop', $item.offset().top ); if( saveheight ) { $item.data( 'height', $item.height() ); } } ); } function initEvents() { // when clicking an item, show the preview with the item´s info and large image. // close the item if already expanded. // also close if clicking on the item´s cross initItemsEvents( $items ); // on window resize get the window´s size again // reset some values.. $window.on( 'debouncedresize', function() { scrollExtra = 0; previewPos = -1; // save item´s offset saveItemInfo(); getWinSize(); var preview = $.data( this, 'preview' ); if( typeof preview != 'undefined' ) { hidePreview(); } } ); } function initItemsEvents( $items ) { $items.on( 'click', 'span.og-close', function() { hidePreview(); return false; } ).children( 'a' ).on( 'click', function(e) { var $item = $( this ).parent(); // check if item already opened current === $item.index() ? hidePreview() : showPreview( $item ); return false; } ); } function getWinSize() { winsize = { width : $window.width(), height : $window.height() }; } function showPreview( $item ) { var preview = $.data( this, 'preview' ), // item´s offset top position = $item.data( 'offsetTop' ); scrollExtra = 0; // if a preview exists and previewPos is different (different row) from item´s top then close it if( typeof preview != 'undefined' ) { // not in the same row if( previewPos !== position ) { // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window if( position > previewPos ) { scrollExtra = preview.height; } hidePreview(); } // same row else { preview.update( $item ); return false; } } // update previewPos previewPos = position; // initialize new preview for the clicked item preview = $.data( this, 'preview', new Preview( $item ) ); // expand preview overlay preview.open(); } function hidePreview() { current = -1; var preview = $.data( this, 'preview' ); preview.close(); $.removeData( this, 'preview' ); } // the preview obj / overlay function Preview( $item ) { this.$item = $item; this.expandedIdx = this.$item.index(); this.create(); this.update(); } Preview.prototype = { create : function() { // create Preview structure: this.$title = $( '<h3></h3>' ); this.$description = $( '<p></p>' ); this.$href = $( '' ); this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href ); this.$loading = $( '<div class="og-loading"></div>' ); this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading ); this.$closePreview = $( '<span class="og-close"></span>' ); this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details ); this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner ); // append preview element to the item this.$item.append( this.getEl() ); // set the transitions for the preview and the item if( support ) { this.setTransition(); } }, update : function( $item ) { if( $item ) { this.$item = $item; } // if already expanded remove class "og-expanded" from current item and add it to new item if( current !== -1 ) { var $currentItem = $items.eq( current ); $currentItem.removeClass( 'og-expanded' ); this.$item.addClass( 'og-expanded' ); // position the preview correctly this.positionPreview(); } // update current value current = this.$item.index(); // update preview´s content var $itemEl = this.$item.children( 'a' ), eldata = { href : $itemEl.attr( 'href' ), largesrc : $itemEl.data( 'largesrc' ), title : $itemEl.data( 'title' ), description : $itemEl.data( 'description' ) }; this.$title.html( eldata.title ); this.$description.html( eldata.description ); this.$href.attr( 'href', eldata.href ); var self = this; // remove the current image in the preview if( typeof self.$largeImg != 'undefined' ) { self.$largeImg.remove(); } // preload large image and add it to the preview // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper) if( self.$fullimage.is( ':visible' ) ) { this.$loading.show(); $( '<img/>' ).load( function() { var $img = $( this ); if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) { self.$loading.hide(); self.$fullimage.find( 'img' ).remove(); self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); } } ).attr( 'src', eldata.largesrc ); } }, open : function() { setTimeout( $.proxy( function() { // set the height for the preview and the item this.setHeights(); // scroll to position the preview in the right place this.positionPreview(); }, this ), 25 ); }, close : function() { var self = this, onEndFn = function() { if( support ) { $( this ).off( transEndEventName ); } self.$item.removeClass( 'og-expanded' ); self.$previewEl.remove(); }; setTimeout( $.proxy( function() { if( typeof this.$largeImg !== 'undefined' ) { this.$largeImg.fadeOut( 'fast' ); } this.$previewEl.css( 'height', 0 ); // the current expanded item (might be different from this.$item) var $expandedItem = $items.eq( this.expandedIdx ); $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, this ), 25 ); return false; }, calcHeight : function() { var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded, itemHeight = winsize.height; if( heightPreview < settings.minHeight ) { heightPreview = settings.minHeight; itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded; } if( heightPreview > settings.maxHeight ) { heightPreview = settings.maxHeight; itemHeight = settings.maxHeight; } this.height = heightPreview; this.itemHeight = itemHeight; }, setHeights : function() { var self = this, onEndFn = function() { if( support ) { self.$item.off( transEndEventName ); } self.$item.addClass( 'og-expanded' ); }; this.calcHeight(); this.$previewEl.css( 'height', this.height ); this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, positionPreview : function() { // scroll page // case 1 : preview height + item height fits in window´s height // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height var position = this.$item.data( 'offsetTop' ), previewOffsetT = this.$previewEl.offset().top - scrollExtra, scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT; $body.animate( { scrollTop : scrollVal }, settings.speed ); }, setTransition : function() { this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); }, getEl : function() { return this.$previewEl; } } return { init : init, addItems : addItems };})();сам html <ul id="og-grid" class="og-grid"><li>...</li><li> <a data-largesrc="" data-title=" " data-description=" "> <img src="images/exp/but.jpg" alt="img01"/> <!--это маленькая картинка на которую нажимают--> </a> <div class="info"> <img src="images/img001.png" class="pic" alt="img01"/> <!--высота открываемого окна должна равняться высоте этой картинки--> </div> </li><li>...</li> Спасибо всем кто откликнется.
  14. anutti
    Добрый день! Помогите исправить скрипт, Вот пример работы скрипта http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/ Скрипт рассчитывает высоту открываемого окошка в зависимости от высоты окна браузера, а мне нужно чтобы высота окошка равнялась высоте содержимого, у меня содержимое это картинка... Помогите, я уже по разному пыталась, ни чего не выходит. сам скрипт такой: /** debouncedresize: special jQuery event that happens once after a window resize** latest version and complete README available on Github:* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js** Copyright 2011 @louis_remi* Licensed under the MIT license.*/var $event = $.event,$special,resizeTimeout;$special = $event.special.debouncedresize = { setup: function() { $( this ).on( "resize", $special.handler ); }, teardown: function() { $( this ).off( "resize", $special.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments, dispatch = function() { // set correct event type event.type = "debouncedresize"; $event.dispatch.apply( context, args ); }; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } execAsap ? dispatch() : resizeTimeout = setTimeout( dispatch, $special.threshold ); }, threshold: 250};// ======================= imagesLoaded Plugin ===============================// https://github.com/desandro/imagesloaded// $('#my-container').imagesLoaded(myFunction)// execute a callback when all images have loaded.// needed because .load() doesn't work on cached images// callback function gets image collection as argument// this is the container// original: MIT license. Paul Irish. 2010.// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou// blank image data-uri bypasses webkit log warning (thx doug jones)var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';$.fn.imagesLoaded = function( callback ) { var $this = this, deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, hasNotify = $.isFunction(deferred.notify), $images = $this.find('img').add( $this.filter('img') ), loaded = [], proper = [], broken = []; // Register deferred callbacks if ($.isPlainObject(callback)) { $.each(callback, function (key, value) { if (key === 'callback') { callback = value; } else if (deferred) { deferred[key](value); } }); } function doneLoading() { var $proper = $(proper), $broken = $(broken); if ( deferred ) { if ( broken.length ) { deferred.reject( $images, $proper, $broken ); } else { deferred.resolve( $images ); } } if ( $.isFunction( callback ) ) { callback.call( $this, $images, $proper, $broken ); } } function imgLoaded( img, isBroken ) { // don't proceed if BLANK image, or image is already loaded if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { return; } // store element in loaded images array loaded.push( img ); // keep track of broken and properly loaded images if ( isBroken ) { broken.push( img ); } else { proper.push( img ); } // cache image and its state for future calls $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); // trigger deferred progress method if present if ( hasNotify ) { deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); } // call doneLoading and clean listeners if all images are loaded if ( $images.length === loaded.length ){ setTimeout( doneLoading ); $images.unbind( '.imagesLoaded' ); } } // if no images, trigger immediately if ( !$images.length ) { doneLoading(); } else { $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ // trigger imgLoaded imgLoaded( event.target, event.type === 'error' ); }).each( function( i, el ) { var src = el.src; // find out if this image has been already checked for status // if it was, and src has not changed, call imgLoaded on it var cached = $.data( el, 'imagesLoaded' ); if ( cached && cached.src === src ) { imgLoaded( el, cached.isBroken ); return; } // if complete is true and browser supports natural sizes, try // to check for image status manually if ( el.complete && el.naturalWidth !== undefined ) { imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); return; } // cached images don't fire load sometimes, so we reset src, but only when // dealing with IE, or image is complete (loaded) and failed manual check // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f if ( el.readyState || el.complete ) { el.src = BLANK; el.src = src; } }); } return deferred ? deferred.promise( $this ) : $this;};var Grid = (function() { // list of items var $grid = $( '#og-grid' ), // the items $items = $grid.children( 'li' ), // current expanded item's index current = -1, // position (top) of the expanded item // used to know if the preview will expand in a different row previewPos = -1, // extra amount of pixels to scroll the window scrollExtra = 0, // extra margin when expanded (between preview overlay and the next items) marginExpanded = -68, $window = $( window ), winsize, $body = $( 'html, body' ), // transitionend events transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], // support for csstransitions support = Modernizr.csstransitions, // default settings settings = { minHeight : 500, maxHeight : 840, speed : 350, easing : 'ease' }; function init( config ) { // the settings.. settings = $.extend( true, {}, settings, config ); // preload all images $grid.imagesLoaded( function() { // save item´s size and offset saveItemInfo( true ); // get window´s size getWinSize(); // initialize some events initEvents(); } ); } // add more items to the grid. // the new items need to appended to the grid. // after that call Grid.addItems(theItems); function addItems( $newitems ) { $items = $items.add( $newitems ); $newitems.each( function() { var $item = $( this ); $item.data( { offsetTop : $item.offset().top, height : $item.height() } ); } ); initItemsEvents( $newitems ); } // saves the item´s offset top and height (if saveheight is true) function saveItemInfo( saveheight ) { $items.each( function() { var $item = $( this ); $item.data( 'offsetTop', $item.offset().top ); if( saveheight ) { $item.data( 'height', $item.height() ); } } ); } function initEvents() { // when clicking an item, show the preview with the item´s info and large image. // close the item if already expanded. // also close if clicking on the item´s cross initItemsEvents( $items ); // on window resize get the window´s size again // reset some values.. $window.on( 'debouncedresize', function() { scrollExtra = 0; previewPos = -1; // save item´s offset saveItemInfo(); getWinSize(); var preview = $.data( this, 'preview' ); if( typeof preview != 'undefined' ) { hidePreview(); } } ); } function initItemsEvents( $items ) { $items.on( 'click', 'span.og-close', function() { hidePreview(); return false; } ).children( 'a' ).on( 'click', function(e) { var $item = $( this ).parent(); // check if item already opened current === $item.index() ? hidePreview() : showPreview( $item ); return false; } ); } function getWinSize() { winsize = { width : $window.width(), height : $window.height() }; } function showPreview( $item ) { var preview = $.data( this, 'preview' ), // item´s offset top position = $item.data( 'offsetTop' ); scrollExtra = 0; // if a preview exists and previewPos is different (different row) from item´s top then close it if( typeof preview != 'undefined' ) { // not in the same row if( previewPos !== position ) { // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window if( position > previewPos ) { scrollExtra = preview.height; } hidePreview(); } // same row else { preview.update( $item ); return false; } } // update previewPos previewPos = position; // initialize new preview for the clicked item preview = $.data( this, 'preview', new Preview( $item ) ); // expand preview overlay preview.open(); } function hidePreview() { current = -1; var preview = $.data( this, 'preview' ); preview.close(); $.removeData( this, 'preview' ); } // the preview obj / overlay function Preview( $item ) { this.$item = $item; this.expandedIdx = this.$item.index(); this.create(); this.update(); } Preview.prototype = { create : function() { // create Preview structure: this.$title = $( '<h3></h3>' ); this.$description = $( '<p></p>' ); this.$href = $( '' ); this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href ); this.$loading = $( '<div class="og-loading"></div>' ); this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading ); this.$closePreview = $( '<span class="og-close"></span>' ); this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details ); this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner ); // append preview element to the item this.$item.append( this.getEl() ); // set the transitions for the preview and the item if( support ) { this.setTransition(); } }, update : function( $item ) { if( $item ) { this.$item = $item; } // if already expanded remove class "og-expanded" from current item and add it to new item if( current !== -1 ) { var $currentItem = $items.eq( current ); $currentItem.removeClass( 'og-expanded' ); this.$item.addClass( 'og-expanded' ); // position the preview correctly this.positionPreview(); } // update current value current = this.$item.index(); // update preview´s content var $itemEl = this.$item.children( 'a' ), eldata = { href : $itemEl.attr( 'href' ), largesrc : $itemEl.data( 'largesrc' ), title : $itemEl.data( 'title' ), description : $itemEl.data( 'description' ) }; this.$title.html( eldata.title ); this.$description.html( eldata.description ); this.$href.attr( 'href', eldata.href ); var self = this; // remove the current image in the preview if( typeof self.$largeImg != 'undefined' ) { self.$largeImg.remove(); } // preload large image and add it to the preview // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper) if( self.$fullimage.is( ':visible' ) ) { this.$loading.show(); $( '<img/>' ).load( function() { var $img = $( this ); if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) { self.$loading.hide(); self.$fullimage.find( 'img' ).remove(); self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); } } ).attr( 'src', eldata.largesrc ); } }, open : function() { setTimeout( $.proxy( function() { // set the height for the preview and the item this.setHeights(); // scroll to position the preview in the right place this.positionPreview(); }, this ), 25 ); }, close : function() { var self = this, onEndFn = function() { if( support ) { $( this ).off( transEndEventName ); } self.$item.removeClass( 'og-expanded' ); self.$previewEl.remove(); }; setTimeout( $.proxy( function() { if( typeof this.$largeImg !== 'undefined' ) { this.$largeImg.fadeOut( 'fast' ); } this.$previewEl.css( 'height', 0 ); // the current expanded item (might be different from this.$item) var $expandedItem = $items.eq( this.expandedIdx ); $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, this ), 25 ); return false; }, calcHeight : function() { var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded, itemHeight = winsize.height; if( heightPreview < settings.minHeight ) { heightPreview = settings.minHeight; itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded; } if( heightPreview > settings.maxHeight ) { heightPreview = settings.maxHeight; itemHeight = settings.maxHeight; } this.height = heightPreview; this.itemHeight = itemHeight; }, setHeights : function() { var self = this, onEndFn = function() { if( support ) { self.$item.off( transEndEventName ); } self.$item.addClass( 'og-expanded' ); }; this.calcHeight(); this.$previewEl.css( 'height', this.height ); this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, positionPreview : function() { // scroll page // case 1 : preview height + item height fits in window´s height // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height var position = this.$item.data( 'offsetTop' ), previewOffsetT = this.$previewEl.offset().top - scrollExtra, scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT; $body.animate( { scrollTop : scrollVal }, settings.speed ); }, setTransition : function() { this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); }, getEl : function() { return this.$previewEl; } } return { init : init, addItems : addItems };})();сам html <ul id="og-grid" class="og-grid"><li>...</li><li> <a data-largesrc="" data-title=" " data-description=" "> <img src="images/exp/but.jpg" alt="img01"/> <!--это маленькая картинка на которую нажимают--> </a> <div class="info"> <img src="images/img001.png" class="pic" alt="img01"/> <!--высота открываемого окна должна равняться высоте этой картинки--> </div> </li><li>...</li>по сути вот эти данные data-largesrc="" data-title=" " data-description=" " мне не нужны, их можно убрать.... но это не принципиально. Спасибо всем кто откликнется.
  15. anutti
    Решение найдено, спасибо всем за внимание )
  16. anutti
    Добрый день! Подскажите как зациклить анимацию кнопки, пока что анимация работает только после клика, а мне нужно чтобы она работала всегда с перерывом в 1 секунду. код такой <!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Button Styles </title><meta name="description" content="Creative Button Styles - Modern and subtle styles & effects for buttons" /><meta name="keywords" content="button styles, css3, modern, flat button, subtle, effects, hover, web design" /><meta name="author" content="Codrops" /><link rel="stylesheet" type="text/css" href="css/component.css" /><script src="js/modernizr.custom.js"></script></head><body><section class="color-7" id="btn-click"><p class="text">Click on the buttons to see the effect</p><p><button class="btn btn-7 btn-7h icon-envelope">safsf</button><button class="btn btn-7 btn-7h icon-envelope">Submit form</button></p></section><script src="js/classie.js"></script><script>var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),totalButtons7Click = buttons7Click.length;buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );function activate() {var self = this, activatedClass = 'btn-activated';if( classie.has( this, 'btn-7h' ) ) {// if it is the first of the two btn-7h then activatedClass = 'btn-error';// if it is the second then activatedClass = 'btn-success'activatedClass = buttons7Click.indexOf( this ) === totalButtons7Click-2 ? 'btn-error' : 'btn-success';}if( !classie.has( this, activatedClass ) ) {classie.add( this, activatedClass );setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );}};</script></body></html>/* General button style (reset) */.btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}.btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}/* Button 7 */.btn-7 { background: #17aa56; color: #fff; border-radius: 7px; box-shadow: 0 5px #119e4d; padding: 25px 60px 25px 90px;}/* Icon only style */.btn-icon-only { font-size: 0; padding: 25px 30px;}.btn-icon-only:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 26px; line-height: 54px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;}/* Button 7h */.btn-7h span { display: inline-block; width: 100%;}.btn-7h:before { position: absolute; left: 0; width: 40%; font-size: 160%; line-height: 0.8; color: #0a833d;}/* Success and error */.btn-error { color: transparent;}.btn-error:after { z-index: 1; color: #fff; left: 40%;}.btn-error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s;}@-webkit-keyframes shake { 0%, 100% {-webkit-transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: rotate(-1deg);} 20%, 40%, 60%, 80% {-webkit-transform: rotate(1deg);}}@-moz-keyframes shake { 0%, 100% {-moz-transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {-moz-transform: rotate(-1deg);} 20%, 40%, 60%, 80% {-moz-transform: rotate(1deg);}}@keyframes shake { 0%, 100% {transform: rotate(0deg);} 10%, 30%, 50%, 70%, 90% {transform: rotate(-1deg);} 20%, 40%, 60%, 80% {transform: rotate(1deg);}}.btn-error:after { content: "Error!"; -webkit-animation: scaleFromUp 0.5s; -moz-animation: scaleFromUp 0.5s; animation: scaleFromUp 0.5s;}/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) *//*jshint browser: true, strict: true, undef: true *//*global define: false */( function( window ) {'use strict';// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");}// classList support for class management// altho to be fair, the api sucks because it won't accept multiple classes at oncevar hasClass, addClass, removeClass;if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };}else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };}function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );}var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass};// transportif ( typeof define === 'function' && define.amd ) { // AMD define( classie );} else { // browser global window.classie = classie;}})( window );Заранее больше спасибо за отзывы.
  17. anutti
    Спасибо что ответили, но все равно у меня не получилось... ( может быть работает и правильно, но где-то все равно что-то не так, просто перестали картинки заменяться на выбранную всегда виден только изначальный кружок. напишите пожалуйста, где еще у меня может быть баг.
  18. anutti
    Немного поменяла код, чтобы не подумали что у меня что-то из базы берется, все есть на этой же странице Помогите пожалуйста . <body><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option></select></section><!-- добавла к каждоу блоку--><div class="select-img select" id="s1"><img src="img/00_1.png" > text </div>...<div class="select-img select" id="s5"><img src="img/00_5.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option></select></section><div class="select-img" id="s6"><img src="img/00_6.png" > text </div>​...<div class="select-img select" id="s9"><img src="img/00_9.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option></select></section><div class="select-img" id="s10"><img src="img/00_10.png" > text </div>​...<div class="select-img select" id="s12"><img src="img/00_12.png" > text </div><!--Вот сам скрипт --><script src="js/classie.js"></script><script src="js/selectFx.js"></script><script>(function() {[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {new SelectFx(el, {stickyPlaceholder: false,onchange: function(val){var img = document.createElement('img');img.src = 'img/'+val+'.png';img.onload = function() {document.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+val+'.png)';};}});} );})();</script></body>
  19. anutti
    Мне необходимо чтобы круглых меню было 3 штуки, а скрипт написан только для одного: <body> <section> <select class="cs-select cs-skin-circular"> <option value="" disabled selected>Select an activity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </section> <section> <select class="cs-select cs-skin-circular"> <option value="" disabled selected>Select an activity</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </section> <section> <select class="cs-select cs-skin-circular"> <option value="" disabled selected>Select an activity</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </section> <!--В это блоке тоже должна появляться соответствующая картинка только большая и с пояснением--> <div class="select-img"><img src="img/00_**.png" > text </div> <!--Вот сам скрипт --> <script src="js/classie.js"></script> <script src="js/selectFx.js"></script> <script> (function() { [].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) { new SelectFx(el, { stickyPlaceholder: false, onChange: function(val){ var img = document.createElement('img'); img.src = 'img/'+val+'.png'; img.onload = function() { document.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+val+'.png)'; }; } }); } ); })(); </script> </body> Можно посмотреть пример работы меню тут http://tympanus.net/Development/SelectInspiration/index8.html Помогите пожалуйста, я не знаю яву, пыталась сделать по аналогии с другим скриптом но ни чего не вышло. Заранее Спасибо.
  20. anutti
    Добрый день! Помогите пожалуйста поправить скрипт. Вот исходник - ( как все работает можно посмотреть тут http://tympanus.net/Development/SelectInspiration/index8.html. ) Немного поменяла код, чтобы не подумали что у меня что-то из базы берется, все есть на этой же странице Помогите пожалуйста . <body><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option></select></section><!-- добавла к каждоу блоку--><div class="select-img select" id="s1"><img src="img/00_1.png" > text </div>...<div class="select-img select" id="s5"><img src="img/00_5.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option></select></section><div class="select-img" id="s6"><img src="img/00_6.png" > text </div>​...<div class="select-img select" id="s9"><img src="img/00_9.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option></select></section><div class="select-img" id="s10"><img src="img/00_10.png" > text </div>​...<div class="select-img select" id="s12"><img src="img/00_12.png" > text </div><!--Вот сам скрипт --><script src="js/classie.js"></script><script src="js/selectFx.js"></script><script>(function() {[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {new SelectFx(el, {stickyPlaceholder: false,onchange: function(val){var img = document.createElement('img');img.src = 'img/'+val+'.png';img.onload = function() {document.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+val+'.png)';};}});} );})();</script></body> Но скрипт работает только для первого, когда нажимаешь на 2 других меню картинки меняются в первом, а нужно чтобы менялись в том меню в котором выбираешь. Еще необходимо чтобы менялась картинка не только внутри кружка, но и в блоке рядом <div "select-img"><img src="img/00_*.png" ></div> - (* номер от 1 до 12 как и в меню) Помогите пожалуйста исправить, я совершенно не знаю яву. Заранее спасибо.
  21. anutti
    Спасибо Вам БОЛЬШОЕ! Все заработало ) Спасибо ! )
  22. anutti
    Подскажите пожалуйста, как внутрь слайдера вставить форму для ввода логина и пароля, мне нужно чтобы форма была на первом кадре слайдера ( ссылка на слайдер http://ruseller.com/lessons.php?rub_id=2&id=1443 ) Получается что это как-бы вложенная форма и она не отображается, потому что слайдер сам основан на чекбоксах и как я понимаю HTML такое не поддерживает, есть вариант использовать iframe, но он не желателен. <div class="sp-slideshow"> <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1"></label> <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2"></label> <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3"></label> <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4"></label> <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> <label for="button-5" class="button-label-5"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <label for="button-5" class="sp-arrow sp-a5"></label> <div class="sp-content"> <div class="sp-parallax-bg"></div> <ul class="sp-slider clearfix"> <li> <!-- Эта форма не работает ((( --> <form action="..." enctype="..." id="login" method="post"> <input name="email" type="text" /><br /><input name="password" type="password" /><br /><input type="submit" value="Login!" /> </form> </li> <li><img src="images/image2.png" alt="image02" /></li> <li><img src="images/image3.png" alt="image03" /></li> <li><img src="images/image4.png" alt="image04" /></li> <li><img src="images/image5.png" alt="image05" /></li> </ul> </div><!-- sp-content --> </div><!-- sp-slideshow --> Пожалуйста, если надо писать скрипт напишите поподрбнее, я яву не знаю ( Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept