Tag: 响应式设计

谷歌加上喜欢的菜单不适合重新resize

我有这个菜单灵感来自这个问题创建类似于Google Plus的菜单 。 它基于https://stackoverflow.com/a/16843635/1004312和这个小提琴的答案： http ： //jsfiddle.net/CTAKR/ ，它使用了一个选择菜单。 我已经更新了我的样式和列表项。 它似乎工作正常，但菜单只能在加载时工作，而不是重新调整尺寸，我无法弄明白： 注意它是如何仅在加载时起作用的，因此将窗口的大小缩小，然后刷新，然后它将起作用，否则它不起作用： http://jsbin.com/hogad/1/ – 没有处理resize 问题：如何使这项工作也resize。 这是使用固定版本更新的： http ： //jsbin.com/zijot/1/edit 错误的jQuery： // Reference: https://stackoverflow.com/a/16843635/1004312 // http://jsfiddle.net/CTAKR/ — inspiration var items = [{ text: “Home”, link: “#” }, { text: “Books”, link: “#books” }, { text: “Blog”, link: “#blog” }, { text: “About Us”, link: “#about” }, […]

响应式图像映射调整大于100％的容器

我正在使用ImageMapster jquery脚本来创建一个imagemap。 作者提供了一个小提琴，展示了如何响应地调整图像地图的大小。 如果您希望地图占据页面宽度的100％，则可以使用它。 但是，如果您在地图周围放置一个边界容器，就像我在下面的示例中所做的那样（使用作者的响应示例），它会大大超出边界框的宽度。 （当您查看下面的小提琴时，尝试放大浏览器）。 如何更改此resize代码以强制地图不要超过其容器的宽度？ 常规css max-width不能这样做。 小提琴： http ： //jsfiddle.net/jQG48/999/ 这是他用来计算大小的代码： function resize(maxWidth,maxHeight) { var image = $(‘img’), imgWidth = image.width(), imgHeight = image.height(), newWidth=0, newHeight=0; if (imgWidth/maxWidth>imgHeight/maxHeight) { newWidth = maxWidth; } else { newHeight = maxHeight; } image.mapster(‘resize’,newWidth,newHeight,resizeTime); }

jQuery：如何仅在移动屏幕分辨率下隐藏下拉菜单？

我正在创建一个CSS响应式网站。 如何在移动屏幕分辨率下隐藏下拉菜单？ 并且在更大的分辨率下再次出现？ （我是jQuery的新手） 这是我的HTML： About Link 1 Link 2 Link 3 而我的jQuery： $(‘#menu li ul’).css({ display: “none”, }); $(‘#menu li’).hover(function() { $(this) .find(‘ul’) .stop(true, true) .slideDown(‘fast’); }, function() { $(this) .find(‘ul’) .stop(true,true) .fadeOut(‘fast’); });

如何在加载和窗口大小调整时执行jQuery函数？

如何在加载和窗口大小调整时运行此函数？ 谢谢。 jQuery(function( $ ) { var headerHeight = $(“#header”).outerHeight(); var viewportHeight = $(window).height(); var elementNewHeight = viewportHeight – headerHeight; $(“.fullHeightThis”).outerHeight(elementNewHeight); });

无法使FlowType.js工作

我在标记之前插入了以下内容，类型根本没有变化。 我无法弄清楚我做错了什么。 https://github.com/simplefocus/FlowType.JS http://jsfiddle.net/tawshmcd/gLJxE/ – $(‘body’).flowtype({ minimum : 500, maximum : 1200, minFont : 12, maxFont : 40, fontRatio : 30, lineRatio : 1.45 });

使用Window Size JavaScript显示和隐藏div？

我正在尝试显示基于两个或最好是三个定义的窗口大小的div用于移动设备。 我目前正在尝试实施： if( $(window).width() > 768 ) { $(‘#div1’).show(); $(‘$div2’).hide(); } else { } if( $(window).width() < 768 ) { $('#div1').hide(); $('$div2').show(); } else { } 但这不起作用我在这里做错了什么？

响应式旋转木马

我想在我的网站上使用jQuery Feature Carousel（ http://www.bkosborne.com/jquery-feature-carousel ）。 我在笔记本电脑和台式机上工作正常。 但是当我在移动设备上浏览它时，它看起来并不好看。 我在一个名为（www.rowan.edu）的网站上看到了一个这样的例子，在那里工作得很好。 我无法弄清楚为什么我无法使它工作。可以帮助我使用这个滑动装置使其在移动设备上工作。 我使用的图像尺寸是：750px * 355px

响应式JavaScript – 加载/隐藏与浏览器宽度相关的特定function？

首先：我不是JavaScript / JQuery！ ……但我会试着指出我想做什么。 我正在我的页面上使用梦幻般的bx滑块，我通过媒体查询使我的网站响应，这两个目前都很好。 …但是bx-slider-script中有一些function我不想在特定的浏览器宽度上激活。 这就是我想要的： browser-width LOWER比500px =加载此函数： $(‘#slider4’).bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 230, slideMargin: 10, nextSelector: ‘#next’, prevSelector: ‘#prev’, infiniteLoop: false, hideControlOnEnd: true, pager: false, useCSS: false, easing: ‘easeInOutExpo’, speed: 1000 }); 浏览器宽度高于500px =隐藏上面的函数并加载这个： $(‘#slider4’).bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 230, slideMargin: 20, nextSelector: ‘#next’, prevSelector: ‘#prev’, infiniteLoop: false, hideControlOnEnd: true, […]

具有流体宽度和高度的行中相等高度div（或li）（完成90％）

嘿所以我发现CSS-tricks Chris Coyier发布了这个甜蜜的jquery片段，它将div元素高度重置在页面上（位于同一行）与最高元素相同的位置。 问题此解决方案几乎适用于流体宽度布局，并在顶部位置更改时重置高度，但在页面首次加载时将其重置为行中当前最高元素的原始高度。 这是一个问题，因为自从这个页面首次加载以来，最高元素的高度可能已经改变了，因为使用了像ems这样的相对单位或者因为带有段落的自动换行。 建议的解决方案解决方案是将行的元素高度设置为最高元素的当前高度，而不是原始高度。 我没有成功完成这个。 以下是“li.half”是要比较和resize的元素的片段。 jQuery(document).ready(function($) { // these are (ruh-roh) globals. You could wrap in an // immediately-Invoked Function Expression (IIFE) if you wanted to… var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(); function setConformingHeight(el, newHeight) { // set the height to something new, but remember the original […]

如何使用javascript / jquery根据屏幕大小加载某些元素

我正在使用响应式网页设计（通过媒体查询）制作网站。 我想针对不同的屏幕尺寸制作不同的广告。 例如，我不希望在手机浏览器访问该网站时显示780by90广告。 我知道显示：无; 不是一个选项，因为广告仍会加载并记录展示。 这不是一个选择。 基本上，我需要知道如何在找到屏幕分辨率后通过javascript加载广告。 我可以找到解决方案，我只是不知道如何在找到后添加广告。 我用jquery尝试过.html但似乎不允许在dom中添加脚本标签。 提前致谢。