I was wondering how to ignore the div tag in this bit of code until a certain screen size is reached (767px) but still display everything inside.
<div class="parent">
<h4 class"title">Title</h4>
<ul>
<li>Cities</li>
</ul>
</div>
I'm unsure what you mean by ignore but still display everything inside, so this may not be exactly what you're looking for. However, I would detect screen size and change using JQuery events, and adjust the display accordingly. For example:
function ShowHideParent() {
if($(window).width() >= 768 && $(window).height >= 480)
$('.parent').show();
else
$('.parent').hide();
}
$(document).ready( function () {
ShowHideParent();
});
$(window).resize( function () {
ShowHideParent();
});
If you elaborate more on exactly what you want and why, we might be able to find a better solution. I have a feeling that you might be using this as a workaround for small displays such as the ones on mobile devices. If that is the case, then you may be interested in checking out a web front-end framework such as Foundation. These frameworks have taken care of a lot of the hassle of accommodating a variety of screen sizes, and can help display your content cleanly without having to resort to hacky workarounds.
You'll need to use Javascript.
Why do you not remove only the class of the element? Like this:
var parentClass = 'parent';
if ($(window).width() >= 767) {
var p = $('.parent');
p.removeClass('parent');
} else {
p.addClass('parent');
}
<div class="parent">
<h4 class "title">Title</h4>
<ul>
<li>Cities</li>
</ul>
</div>
Related
so I have a long case study, so many images it takes forever to load. So one of the steps I'm taking is hiding all images in a section that are more than 3. I'm doing this in a simple way with show and hide jQuery, and manually adding the target ID to the div I want to show. My question I'm trying to figure out is how I can use this code to target every section, instead of one, since I can only use the target ID once. I don't want to simple copy and paste the code and change the target DIV name, as that is going to be very redundant and certainly the most amateur approach. My pen is located here:
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
body {padding:30px;}
#target { display:none;}
.Hide{ display:none;}
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});
Thank you in advance!
I don't understand what you mean and what you want to do, but you can use it this way instead of a few different functions.
As far as I understand you want to use css classes as well?
.hide{display:none}
$("button").click(function() {
$("button").removeClass("hide");
$(this).addClass("hide")
})
I tried to be helpful in a very simple way for you, I hope it will be useful.
As the title says, there's a portion of white space on my website when changing pages. The index page has no issues, but when going to "Work" or "Contact" page, a white empty space appears.
To demonstrate, please head over to my website. Then resize your browser, till the responsive breakpoint (or just use your phone), then using the menu, change to either the "Work" page, or "Contact" page.
I would have solved this issue by now, but the problem persists because I could not debug, use console, or diagnose in any way where the issue arises from.
If you do, please state how you diagnosed it.
Thank you in advance.
Edit #1: After a comment pointed out that it could be a JS issue, I looked into my JS code and the only thing I can come up with is that the following lines of code causes the issue:
$(document).ready(function() {
function setHeightLContainer() {
windowHeight = $(window).innerHeight();
$('#lContainer').css('min-height', windowHeight);
};
setHeightLContainer();
$(window).resize(function() {
setHeightLContainer();
});
});
However, after removing the following code (and anything alike), the issue still persisted.
Edit #2: The following is the HTML and JS for Work page.
JS:
$(".navSide").on("click",".workButton",(function(){
if (!$(".workButton").hasClass("active")) {
$(this).addClass("active").siblings().removeClass("active");
$("#desTitle").load("work.html #desTitle", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}});
$("#rContent").animate({width:'toggle'},400, function() {$("#rContent").load("work.html #rContent > *", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}})});
$("#rContent").animate({width:'toggle'},4500);
$("#lContent").fadeOut(400,function(){
$("#lContent").load("work.html #lContent > *", function(response,status,xhr) {
if ( status == "error" ) {
$("#warning").fadeIn("fast");
}});
});
$("#lContent").fadeIn(4500, function(){});
}
}));
HTML:
<body>
<div id="lContainer">
<div id="lContent">
<h1 class="infoHead infoPos" id="lContentWorkHeader">Work</h1>
<p class="lead shortDes infoPos">Please feel free to take a look at the work I have done so far</p>
<p class="shortDes infoPos" id="lContentWork">The content on the white portion will always be updated when I've had the opportunity to do more projects. I'm always welcoming new projects as I have no doubt in my abilities.</p>
</div>
</div>
(Fix) Edit #3: A comment from Andy pointed out that the issue might be from a CSS styling. An ID with the margin-top:30% caused half of the white screen, and I now have a lead on how to find the rest.
I apologize for my initial post being incomplete, I just had no diagnostics to present.
Got it at last.
Could not let this one go.
The white bar at the top when below 767px was actually part of the lContent which size is 100% of content, the Lcontainer seems to be displaying over the top.
The Lcontainer did not have display set, I changed it via Google Chrome attributes to display: inline-block;
No more White Space :)
Change your code to the following to test :
<div id="lContainer" style="min-height: 993px;/* position: fixed; */display: inline-block;">
Google Chrome to the rescue being able to identify and play with elements whilst seeing results, really does make it an excellent tool.
There are other options you can try but this seems to work ok for me try it out.
I'm trying to display a form in a "Show" View and am wanting to use Foundation's equalizer to make the divs the same height but for some reason it doesn't work with one div being taller than the other.
My guess would be that it has something to do with using php inside the containers but I didn't find anything related to that on their docs page.
If anyone can point out where I went wrong or if they know for certain that this just wont work with Foundation I would appreciate your input! Thanks!
HTML:
<div class="row" data-equalizer>
<div class="small-6 columns" data-equalizer-watch>
<fieldset><legend>Order Information</legend>
<?php
echo "Number of Guests: ". $order_array['guestNumber' . $x].'<br>';
echo "Food: ". $order_array['food' . $x].'<br>';
?>
</fieldset>
</div>
<div class="small-6 columns k" data-equalizer-watch>
<fieldset><legend>Location</legend>
<?php
echo "Order Name: " . $order_array['orderName'] . '<br>';
?>
</fieldset>
</div>
</div>
My solution (before finding a more efficient solution using another plugin which I recommend) was to wrap the foundation init like so:
$(window).on('load', function () {
$(document).foundation();
});
Equalizer will have no effect if the items are stacking (if the offset().top value of all of them is not equal) and you have set equalize_on_stack: false. Try adding this configuration to your main js file:
$(document).ready(function() {
$(document).foundation({
equalizer : {
// Specify if Equalizer should make elements equal height once they become stacked.
equalize_on_stack: true
}
});
});
My issue was that I was initializing the Foundation js before the page was finished loading. Make sure you are wrapping your Foundation initializer in the jQuery ready() function:
$(function() {
$(document).foundation();
});
My first thought, is that Equalizer is working and it is making both <div class="small-6 columns">s the same height. Unless you have some visual clue to differentiate them such as different background colors or a border setting it may be hard to tell if Equalizer is working properly. Please note that I have made this mistake before.
If your intention was to make the <fieldset>s the same height, you would need to move the data-equalizer-watch from the <div class="small-6 columns">s to the <fieldset>s. This would also allow you to visually see if Equalizer is working, because of <fieldset>'s border.
I created this codepen,http://cdpn.io/igDoI, with two examples. One is your code above where I added a dashed border to both of your <div class="small-6 columns">s. The other example is your code above where I moved the data-equalizer-watch to the <fieldset>s.
I hope that helps,
Not sure if this applies to you, but when you are using foundation's equalizer you must ensure the following for each ancestor of elements with "data-equalizer-width" that are also children of the element with the "data-equalizer" attribute:
No borders
No padding
No margins
This isn't actually in the API, but these properties affect the height calculations of equalizer, and can sometimes cause it to go wrong.
Also, you must ensure the controls being "equalized" are visible when the equalizing code is called. So, if you are using equalizer in a tab that is hidden on page load, you need to trigger equalizer again when that part becomes visible. You can do this by triggering a resize event on the window object.
Initializing the Foundation after the page was finished loading, worked for me. I improved that solution by initializing only equalizer after loading. So the other stuff can start on "ready".
jQuery(window).on('load', function () {
var element = jQuery('[data-equalizer]');
var elem = new Foundation.Equalizer(element);
});
Hi all,
I've been working on a set of Razor templates that is either Site Editable with the Experience Manager and at the same time is fully responsive for several screenwidths with the Twitter bootstrap. As a result, I need to dynamically manipulate the DOM output based on what the Experience Manager editor adds or deletes but still maintain the responsive design. Part of this construction is adhering to the rules the twitter bootstrap dictates.
The twitter bootstrap allows for excellent responsive design by introducing dynamically calculated div widths using classes. A <div class="span12> uses the entire width of the wrapper, for example. A "span6" effectively uses half, with a certain margin calculated as well to allow for another div with "span6". However, this only works if the preceding class is called <div class="row-fluid">,and as long as the span<numbers> actually add up to exactly 12. The problem arises when I need to close the <div class="row-fluid"> when this number is actually reached.
To clarify: it has to output like this
<div class="row-fluid">
<div class="span6">..code</div>
<div class="span4">..code</div>
<div class="span2">..code</div>
</div>
The <div class="span[#]"> are rendered with a component template, in order to allow for multiple components within the <div class="row-fluid>, which the Page Template renders.
However, from a component template level I cannot seem to retrieve the actual amount of components of this template actually exist on the Page itself. I calculate the width of the component used based on a schema option of the component itself. I use the following Component Template code to render it correctly:
#{
var spanClass = String.Empty;
if (Fields.HasField("component_width") && Fields.component_width != null) {
if (Fields.component_width.ToLower() == "full") {
spanClass = "span12";
} else if (Fields.component_width.ToLower() == "half") {
spanClass = "span6";
} else if (Fields.component_width == "40%") {
spanClass = "span5";
} else if (Fields.component_width == "35%") {
spanClass = "span4";
} else if (Fields.component_width == "25%") {
spanClass = "span3";
}
}
}
<div class="#spanClass">...code
To get to my question: I need to be able to close the <row-fluid> div if the number 12 has been reached. So if one component with the options 'Full' (width) is selected, the following output code needs to appear:
<div class="row-fluid">
<div class="span12">..code</div>
</div>
If there are two components on the page with the option "half" are selected, it must allow
<div class="row-fluid">
<div class="span6">..code</div>
<div class="span6">..code</div>
</div>
mind the closing div on the end. Is there some way I can reach the variable i created on the Component Template var spanClass = String.Empty; from Page Template? Something like:
#foreach (var cp in GetComponentPresentationsByTemplate("XM_Generic Content")) {
#if (cp.Component.spanClass == "span6") {
<div class="row-fluid">
#cp.RenderComponentPresentation()
#if (cp.Index == 1) {
</div>
}
}
}
I'm still getting to know Razor templates, the practicalities of Responsive design and ofcourse StackOverflow. Chances are that I completely missed something, made dumb errors in my code of just asked a silly question. By all means, let me know.
The package is not shared between template runtimes, so this behavior is normal (not being able to see variables set in one template from a different instance).
There are ways around this, but you should consider that perhaps there is a good reason why Tridion chose to isolate the template execution.
See here for one of the ways to go around this.
Standard techniques using the ContextVariables dictionary don't allow you to set something in the CT and access it from the PT. Effectively, each time a Component is rendered, the render context gets a fresh copy of the variables from the page render context. Writing back to them, therefore isn't effective. There is a technique that gets round this, which is described in detail on tridion-practice. As already noted, resorting to these kinds of techniques shouldn't be your first option, but sometimes you need to.
Currently, its seems, the user is defining the width position in the component field. I think, its quite typical, but if you create 5 Component Template which will call a same Razor TBB, and also define, a parameter schema on component Template where can set the width of component then afterwards you can easily call these different CTs in the page template.
I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?