I am pulling blog posts in from the blogger JSON api into my page. The posts are HTML formatted. Some of the posts have floated content; an image, for instance, that is floated left with text to the right that is shorter than the image. The title and date of the post below it are pushed to the right as well. I remember there being an esoteric way within CSS to isolate float within a div. I can't remember how. And I don't remember what it is even called. I've been searching all day. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sandy Reads - News</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style></style>
</head>
<body>
<div class="container-fluid">
<section id="posts">
<div class="page-header">
<h1>Sandy Reads <small>News</small></h1>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script>
$(function () {
var key = "Redacted";
var blogId = "Redacted";
var resource = "https://www.googleapis.com/blogger/v3/blogs/" + blogId + "/posts?maxResults=10&key=" + key;
$.getJSON(resource, function (data) {
var items = [];
$.each(data.items, function (key, val) {
var kind = val.kind;
if (kind !== 'blogger#post')
return;
var blogId = val.id;
var title = val.title;
var content = val.content;
var date = moment(val.updated);
items.push("<li id='" + blogId + "' class='post'>" +
"<a href='blog.html?id=" + blogId + "'><h3>" + title + "</h3></a>" +
"<i>" + date.format('MMMM Do YYYY') + "</i></div>" +
"<div>" + content + "</div>" +
"</li>");
});
$("<ul/>", {
"class": "list-group my-new-list",
html: items.join("")
}).appendTo("#posts");
});
});
</script>
</body>
</html>
You're probably thinking of overflow: hidden, but which element you apply it to depends on what your markup looks like. I can tell you to apply it to the parent of the float, but if the content that is being pushed aside appears in this same parent, then that's not going to help.
OK, so your script generates posts in a series of li.post elements. The content appears in a div following the title and date. You can either set li.post to clear floats, or apply overflow: hidden to the div. (There is a spurious </div> end tag after your post date that you may want to account for.)
Related
Is there a way to add styles in css or sass based on the post content?
Im using
https://github.com/jessegavin/jQuery-Chord-Transposer
Something is preventing the code I just added from running.
var textProp = 'textContent' in document ? 'textContent' : 'innerText';
// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('span.c'), 0).forEach(function(aEl) {
// if the text of the aEl Node contains the text 'link1':
if (aEl[textProp].indexOf('Am') > -1) {
// we update its style:
aEl.style.fontSize = '2em';
aEl.className = 'c foo';
}
});
I would recommend using a thin layer of JS to add a CSS class to a parent element, which the css can check for.
For example, here is some code that makes the text color red if a post has a .category element with 'memes' in it
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
.post.memes {
color: 'red'
}
</style>
</head>
<body>
<article class="post">
<p class="category">memes</p>
<p class="content">Lorem ipsum</p>
</article>
<script>
const postElement = document.querySelector('.post');
if (postElement) {
const category = postElement.querySelector('.category');
if (category && category.innerHTML == 'memes') {
postElement.classList.add('memes');
}
}
</script>
</body>
</html>
I know this question has already been asked but mostly for Fancybox 2 (and not 3) and the only answer I did found didn't help me though.
My web page has two frames, one hosts the Fancybox Gallery. So far, when I click on images, they only open in the corresponding frame and Id like the images to fill the whole screen. Following the answer here (Open fancybox 3 into iframe parent) I made the following code but I didn't went right.
Did I forgot something ? Should I put some code in the main page of my project, the one that holds the two iframes ? Something else I should do ?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
parent.jQuery.fancybox.getInstance().update();
});
$.fancybox.open([
{
src : 'IMG_3301.JPG',
opts : {
caption : 'First caption',
thumb : 'IMG_3301 - copie.JPG'
}
},
{
src : 'IMG_3302.JPG',
opts : {
caption : 'Second caption',
thumb : 'IMG_3302 - copie.JPG'
}
}
], {
loop : false
});
</script>
</head>
<body>
<a data-fancybox="gallery" href="IMG_3301.JPG">
<img src="IMG_3301 - copie.JPG">
</a>
<a data-fancybox="gallery" href="IMG_3302.JPG">
<img src="IMG_3302 - copie.JPG">
</a>
</body>
</html>
By using parent.jQuery.fancybox you can access fancybox within the parent iframe, and, to start fancybox in parent iframe, simply combine your two snippets, like parent.jQuery.fancybox.open(..)
Example:
var $links = $(".imglist a");
$links.click(function () {
parent.jQuery.fancybox.open($links, {
// Your custom options
}, $links.index(this));
return false;
});
Demo - http://fancyapps.com/tmp/embed/
I want to set different width of dc.chart svg on different resolution,but media queries are not working.Is dc.chart supporting media queries or not?
please suggest me solution for it as soon as possible.
<!DOCTYPE html>
<html lang="en" style="overflow:hidden">
<head>
<title>DVH Graph</title>
<meta charset="UTF-8">
<!-- Stop this page from being cached -->
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/hash2Color.js"></script>
<script type="text/javascript" src="js/loadDVH.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<style type="text/css">
#media(max-width:1280px) {
.dc-chart .axis path, .axis line { stroke:#000; }
.dc-chart .axis text { fill: #000; }
.dc-chart svg{width:350px;height:340px;margin-left:10px}
.dc-chart{margin-left:-7px;margin-top:-9px}
}
#media(max-width:1920px) {
.dc-chart .axis path, .axis line { stroke: #000; }
.dc-chart .axis text { fill: #000; }
.dc-chart svg{width:590px;height:340px;margin-left:10px}
.dc-chart{margin-left:-7px;margin-top:-9px}
}
</style>
</head>
<body style="background:#000000" border="0">
<div id="chartCumulativeDVH" style="background: #ffffff;"></div>
<script type="text/javascript">
var chart = dc.seriesChart("#chartCumulativeDVH");
var ndx, doseDimension, doseGroup;
function drawDVH(data) {
//
// The data returned from the DSS Data API isn't quite in the best format for dc graphs
// So, we need to reformat it slightly
//
var dvhColours = [];
var formatted = [];
for (var objCount = 0; objCount < data.length; objCount++) {
var contourID = objCount + 1;
for (var i = 0; i < data[objCount].NumberOfPoints; i++) {
data[objCount].Points[i].Contour = contourID;
formatted.push(data[objCount].Points[i]);
}
// Match the colour of the curve to the label.
var rgb = hash2Color(data[objCount].Contour);
dvhColours.push('rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
}
// Clear the existing chart
if(ndx) {
ndx.remove();
ndx.add(formatted);
dc.redrawAll();
}
ndx = crossfilter(formatted);
doseDimension = ndx.dimension(function(d) {
return [+d.Contour, +d.X];
});
doseDimension.filterFunction(function(d) {
return d;
});
doseGroup = doseDimension.group().reduceSum(function(d) {
return +d.Y;
});
chart
/* .width(347)
.height(280) */
.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
.x(d3.scale.linear().domain([0, 7500]))
.y(d3.scale.linear().domain([0, 100]))
.brushOn(false)
.yAxisLabel("% Volume")
.xAxisLabel("Dose mGy")
.clipPadding(10)
.dimension(doseDimension)
.group(doseGroup)
.mouseZoomable(true)
.seriesAccessor(function(d) { return "Contour: " + d.key[0]; })
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
.ordinalColors(dvhColours);
chart.yAxis().tickFormat(function(d) {return d3.format(',d')(d + 0);});
chart.margins().left = 40;
dc.renderAll();
};
$(document).on("data-available", function (__e, __data) {
drawDVH(__data);
});
// Draw the default graph (e.g. no data)
drawDVH({});
</script>
</body>
</html>
The svg element is directly sized by dc.js, and since element-level styles override stylesheet-level styles, your media queries will have no effect.
What you want to do is set the size of the containing div (#chartCumulativeDVH or .dc-chart).
Then you have two at least three choices how to apply the size to the svg element that will be created:
Leave off the width and height as you show in your example. dc.js will automatically use the size of the container div if width and height are not specified. However, this will not work if anything else is in the div (or might show up there, like the filter and reset controls) because they will no longer be the same size, and the svg size can get out of control in these cases.
Set the size of the chart to match the div size, e.g. (using jQuery) something like
chart
.width($('#chartCumulativeDVH').innerWidth())
.height($('#chartCumulativeDVH').innerHeight())
Or, to base the width and height off the window size without using jQuery and without the media query, as we do in the resizing bar chart example:
chart
.width(window.innerWidth-20)
.height(window.innerHeight-20)
I want to use DOJO border container in my page. I have this sample.
<script>
require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane","dojo/domReady!"],
function(BorderContainer, ContentPane){
// create a BorderContainer as the top widget in the hierarchy
var bc = new BorderContainer({
style: "height: 300px; width: 500px;"
});
// create a ContentPane as the center pane in the BorderContainer
var cp2 = new ContentPane({
region: "center",
content: "how are you?,this is a test content"
});
bc.addChild(cp2);
// put the top level widget into the document, and then call startup()
bc.placeAt(document.body);
bc.startup();
});
</script>
I want to create some columns so that it looks like a table. How can I do that??
Can someone help me
Based on your title, "create columns in Dojo BorderContainer" (emphasis mine), then I would think a dgrid, table container, or grid container inside the border container would suit, depending upon what you were trying to accomplish with the table.
If the table is for data, consider dgrid. If the table is for form layout, consider table container. If the table is for widget layout, consider a grid container.
Here's an example using grid container. nbZones is the number of columns.
<!DOCTYPE html>
<html>
<head>
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/widget/Portlet/Portlet.css' rel='stylesheet' type='text/css' />
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/layout/resources/GridContainer.css' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
<style type='text/css'>
html,body,#border { margin:0; width:100%; height:100%; }
</style>
</head>
<body class='claro'>
<div id='border' data-dojo-type='dijit/layout/BorderContainer'>
<div id='grid'></div>
</div>
<script type='text/javascript'>
require(
['dojo/ready', 'dojo/parser', 'dojox/layout/GridContainer', 'dojox/widget/Portlet'],
function (ready, Parser, GridContainer, Portlet) {
ready(function () {
Parser.parse().then(function () {
// create grid and put into border container
var grid = new GridContainer({nbZones:3}, 'grid');
// create cells and put into grid
for (var i = 0; i < 30; i++) {
grid.addChild(new Portlet({
closable:false,
content:'(' + Math.floor(i/3) + ', ' + (i%3) + ')'
}));
}
grid.startup();
});
});
}
);
</script>
</body>
</html>
In my application i used repeater control.For that i have loaded item at a time.But my client wants to display first 6 items then if the user come to end of the page it will display a image named loading image and after a short time display another 6 items and again the user came to end of page it will display loading image at the end of screen and load another 6 items like that and so on. ex:Facebook loading
It sounds like you need to use continuous scrolling, to load images as the user scrolls. Here are a couple of articles which demonstrate how to use continuous scrolling:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=371
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Here's an example of an image gallery that uses continuous scrolling:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
Source: Is there ability to load page images partially when scroll down to it or is it just effect?
As for displaying a loading image, just use an animated gif as the default image, and delay loading of the actual image for effect, using setTimeout or something along those lines.