I need some help please. I'm noob in jQuery and I try to create a dictionary list.
But my problematic is that each definition must be displayed under his own row of 3 words (desktop), 2 words (in tablet) and under his own word (accordion system) in mobile. One definition must be displayed at a time. I would like to toggle definition when I click on a word.
Wordpress will be use to add words so the list must be dynamic.
Here my incomplete test : https://jsfiddle.net/Xroad/qbh79xoy/31/
$('.tabs .tab-link').each(function (index, item) {
$(item).attr('data-link', index);
});
$('.tab-content .tab-content').each(function (index, item) {
$(item).attr('data-content', index);
});
$('.tabs .tab-link').click(function () {
$('.tabs .tab-link').not(this).removeClass('current');
$(this).toggleClass('current');
});
I don't know what I must write to display each definition under a row of 3 words. Can I have some help please ? Thank you in advance.
DESKTOP VERSION
MOBILE VERSION
You can use media queries, media queries change CSS rules depending on criteria such as screen width.
For example the following width rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
width: 100%;
}
}
And the following width rule won't apply for screens wider than 769px:
#media screen and (max-width: 769px) {
body {
width: 33%;
}
}
You can have as much media queries as you need.
For more info about media queries see this w3schools page
Related
I have some transitions on my web site, and everything is fine on desktop view. But when I try to see my website on cellphone the transitions are really slow, and take a lot of time to load the content.How can I hide (or something like that) the javascript links that calls the transitions?, or maybe hide the classes which calls the javascripts...the classes are like:
-top, -opacity
etc...this classes belong to this plugin
http://www.cwdesigns.de/jquery-scrollflow-plugin.html
please help me!!, cheers.
Use Media Query
Write those classes with transitions in a media query interval for a range of large screens,
#media screen and (min-width: 768px) {
.top {
}
.opacity {
}
}
I am having an issue while switching a design between devices. I know that css3 #media queries are use to handle on the bases of device width, orientation etc.
As far as concern with the device size css media queries are working perfectly fine when am on large screen size or on mobile screen size.
e.g
This is the design for mobile screen size.
and this is the design for large screen
the media queries are working fine to switch the design. But i want to show the mobile screen design on desktop screen when the parent div size is small e.g equals to mobile screen size?
In the below situation i need to shown the mobile screen design on desktop screen size.
I googled it but didn't find any luck. I also try with different options of media queries. Is there any way to resolve this issue?
Sorry I forget to mention that am using foundation framework for responsive design.
Media queries target the screen. Let's suppose you have the following structure:
<div id="foo">
<div id="bar">
</div>
</div>
If you check the width with media query, you are essentially checking the screen width. However, if you check the width:
function isLarge(element, limit) {
return element.width() >= limit;
}
and you add a class based on the size:
function addSizeClass(element, limit) {
element.addClass(isLarge(element, limit) ? "large" : "small");
}
and you call the function for the parent of your element:
addSizeClass($("#bar").parent(), 700);
then, you can design .large and .small, like this:
.large div {
/*your rules*/
}
.small div {
/*your rules*/
}
You can not link your media queries to the div size.
The usual way to handle this is to link them to screen-width, and set the div width to some percentage of the screen width.
Now, you only need to do some math ..
The basic issue here is that you should do a variable/responsive design for all your page, not only the list
I have not used foundation framework. But in media query you can give condition of screen max width :
#media screen and (max-width: 320px) {
// write your code here of css for mobile device
}
Now , suppose if u want make differentiate with mobile device or large device
you can use width property for both of them in css.
So that you can make margin between
name : Collette Simko
Events by Collete
You can always use an iframe to display the page on your development version, instead of altering your browser settings. Might make it easier for universal testing as well.
JavaScript
function iframe( ) {
try { return window.self !== window.top; }
catch( e ) { return true; }
}
if ( !iframe( ) ) {
theParent = document.getElementsByTagName( "body" )[ 0 ];
theIframe = document.createElement( "iframe" );
theIframe.className = "smallScreen";
theIframe.src = "http://example.com/"; // Replace the address with your site address
theParent.insertBefore( theIframe, theParent.firstChild );
}
CSS
iframe.smallScreen {
position: absolute;
z-index: 1000;
border: 1px solid #000000;
height: 800px;
width: 500px;
right: 500px;
top: 50px
}
We use this technique at work when doing Facebook applications, works very well for testing and no need to resize your window all the time – can see both sizes simultaneously and everything works on both ends.
If you are using jQuery, you might as well do something like the following (use the CSS code above in conjunction with this).
JavaScript (jQuery implementation)
function iframe( ) {
try { return window.self !== window.top; }
catch( e ) { return true; }
}
if ( !iframe( ) )
$( "body" ).prepend( '<iframe class="smallScreen" src="http://example.com/" />' ); // Replace the address with your site address
Frame detection picked from this Stack Overflow answer.
Not exactly bulletproof, depends which libraries you use, but certainly worth a shot and works for the most part.
For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.
Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;
Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I've been fiddling around with my navigation menu and decided to add a feature when you scroll down past a certain point the NAV slides down into viewport so that the user doesn't have to scroll back up to the top of the page to navigate. This is something that's become quite popular lately.
So I fiddled around and this javascript did the trick (note that I am not fluent with jquery at all):
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
Now I read that as ... duplicate or 'clone' (make another) .menu_wrapper element before the original + add the class .shrink to it ... AND only once we've scrolled past 700px, we'll see this duplicate NAV because of the class .slidedown
CSS:
.shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
.slidedown .shrink { top:0;}
Now this is working 100% and I'm stoked BUT (it's never smooth sailing is it!!!) now I've got a problem when I change my viewport to a screen width less than 767px - YES my website is responsive and this is where my NAV changes to the typical drop down (even without the javascript / effect above) by using css and javascript:
jQuery(document).ready(function($){
$('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#menu").slideToggle();
$(this).toggleClass("active");
});
});
My problem is that there is now a duplicate dropdown prepended NAV (1 on top of the other), like so:
+ MENU
+ MENU
The one NAV works but the other doesn't ... anyway regardless, when my media query hits 'mobile status' (below 767px) and the NAV prepends to a dropdown, this is when I DON'T want the whole slide-down-effect-clone (first jquery posted above) thing anymore. I want that rule to almost not exist or not apply when I'm below 767px screen width. How can I do this?
I've tried one of the obvious like:
.shrink { display:none}
.slidedown .shrink { display:none}
which almost seems like I've hit the jackpot leaving me only 1 prepended menu:
+ MENU
but nothing happens when I click on it - it doesn't slidedown and show the menu list items.
but I'm thinking like adding a rule within for the javasacript:
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
that when we get below a width of 767px, we ignore the clone() function / rule etc?
I've done some googling of removeclass etc but because I'm a bonehead at javascript, I'm probably doing it all wrong.
Any help I'd appreciate it?
Since you want to hide that menu based on certain viewport dimensions, why not use a media query?
#media all and (max-width: 766px){
.shrink{ display: none; }
}
or
.shrink{ display: none; }
#media all and (min-width: 767px){
.shrink{ display: block; }
}
(That might not be the best width values or CSS properties to use there, but that should get you started.)
Edit: If you wanted to do the entire thing in javascript, the matchMedia() API is there for you, too.
If the CSS media query approach that ajm posted does not work for you, you could try only executing your code if a media query is met. The code in handleMediaQuery() will only run if the width is above 767px;
//Media query listeners
var mql = window.matchMedia("(min-width: 767px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);
function handleMediaQuery(mql) {
if (mql.matches) {
// Do stuff here that you want done when the query matches
}
else {
// Do stuff here that you want done when the query does not match
}
}
See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries for more info
I found this topic Hide A DIV if screen is narrower than 1024px and I want to get something similar with quoted code below, a code for this kind of response: to hide one div ( id="krug_wide" ) if a window is narrower then 1280px and to replace that hidden div with another one ( id="krug_small" ).
I also found out the page http://www.fryed.co.uk/labs/resize_div_on_window_resize connected with mentioned topic. I still can not figure out the right and appropriate syntax but I'm sure it is "a piece of cake" for you.
Thank you in advance.
$(document).ready(function () {
var screen = $(window)
if (screen.width < 1024) {
$("#krug_wide").hide();
}
else {
$("#floatdiv").show();
}
});
You can use Media Queries ou have example on this link
A media query consists of a media type and zero or more expressions
that check for the conditions of particular media features.
with on CSS
#media screen and (max-width: 1280px) {
//Some property here
#krug_wide{
...
}
}
Or create different CSS
<link rel="stylesheet" media="screen and (max-width:1280px)" href="example.css" />
You have many example on W3C Media Queries
Apply the following mediaquery in css
#media only screen (max-device-width: 1023px) {
.content { // Your div's class name to hide
display: none;
}
}