YUI pure css fixed width - yui-pure-css

Can someone show me an example of how I might use purecss.io to implement a fixed width/responsive design, similar to the 960 grid like bootstrap, etc???
The fluid width simply won't work for my particular design, here is what I currently have:
<nav class="pure-u" id="menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="/">HOME</a>
<ul>
<li class="pure-menu-selected">Clients</li>
<li>Company</li>
<li>Portfolio</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="pure-u-1" id="main">
This is the main content area
</div>
</div>
</body>
I need the above wrapped in a containing DIV which centers and has a fixed width of 960 but adjusts responsively as required...
Any ideas???
Regards,
Alex


hope this helps: http://jsfiddle.net/pX7bD/.
The idea is to wrap everything in a div that has a fixed max-width and auto horizontal margins (so it's centered).
#wrapper {
max-width: 960px;
margin: 0 auto;
}

Related

How to display two grids side by side using Angular 6 -Ag grid

I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.
I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.

Using flexbox should solve your problem:
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 500px;
}
<div class="row">
<div class="column">
<ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
<div class="column">
<ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
</div>

Equal height rows that fit into the view with ionic framework

I am trying to show a grid in one of my ionic views that has a 4x3 grid. I want the grid to fit into the view, making all the rows have the same height and all the columns same width also all the content in the cells aligned center both vertically and horizontally.
I'm not so good at CSS so I'm having a hard time with it, any help?

Ionic has built in grid classes. You can do something like this
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
They have a very nice documentation on their grid system and other ways to set up rows and columns. link: http://ionicframework.com/docs/components/#grid
for css centering this should work: just place a div around your rows and columns and apply this the classes. I am not great a css but i will try to help :P
<div class=container>
<div class="row contained">
<div class="col">Centered!</div>
</div>
</div>
div.container {
height: 50%; }
div.contained {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }

How to hide Comment Box after Like something?

I just want to use the like button and not show any comment popup. How can I do this?
Thanks.

Yes, you can do it with a little but of css to hide the DOM element that Facebook adds.
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display: none !important;}

I didn't have success with the above approach. What worked for me was to create a container element with the exact dimensions of the facebook like button and set overflow="hidden" to the container. This worked perfectly for me.

.fb_edge_widget_with_comment iframe { height: 20px !important; overflow: hidden; }

<style>
#fb-container {
height: 20px !important;
width: 93px !important;
overflow: hidden !important;
}
</style>
<div id="fb-container">
<div id="fb-root">
<div class="fb-like" data-href="https://www.facebook.com/youraddr" data-layout="button_count" data-width="100" data-show-faces="false" data-share="false">
</div>
</div>
</div>

just add this style to the style="overflow: hidden !important;" to the div like i have done below
<div class="fb-like pull-right" data-href="http://thegoldbook.in/demo/singlequestion.php?ques_no='.$ques_id.'" data-width="100" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="overflow: hidden !important;"></div>

image map not working on iOS devices, with large images that get rescaled by the device

I'm developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in the region of 5000x3500 pixels. Each image has an image map (using rectangular areas), and all works fine in the desktop browsers I've tried.
The problem I'm finding, is that when users access the site via their iOS devices, the images are being rescaled by safari on the device, however the image map coordinates are not being adjusted to match.
An example of the HTML being generated by my PHP is as follows:
<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,5000,500" href="blah1"/>
<area shape="rect" coords="0,500,2500,3500" href="blah2"/>
<area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>
(The actual rectangle coordinates in the image map are calculated as a percentage of the image size).
I know that safari is resizing the image due to memory constraints on the device, but I need to either find a way of scaling the image map to suit, or replacing the image map with something else that will do the same job. Can anyone offer any advise?

This topic was solved here on stackoverflow: jquery-image-map-alternative
The best idea is to use absolutely positioned anchors (also as suggested by steveax) instead of imagemap.
Update
As this is an old question, you might consider using SVG maps these days. They are supported in all modern browsers, works responsively and are as easy to use as image maps. (thanks to user vladkras for reminder)

Why don't you use Responsive Image Maps instead. This way you can still use poly maps for oddly shaped items.
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
It's as easy as adding the script. And one line of javascript:
$('img[usemap]').rwdImageMaps();

Nathan's comment is correct. You need to fix the viewport to prevent scaling. Basically, either specify a fixed pixel width, or set the scale to 1.0 and set user-scalable=no
See this document for reference:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
An alternative to using the area tag is to use javascript with events x/y & bounds for your hit areas.

I ran into this limitation recently on a project where we needed to be able to zoom and this is what I did to solve it:
Split the image up into 4 quadrants
Placed the 4 images into divs with width and height set to 50% and position: absolute;
Absolutely positioned <a> elements within the quadrant's parent element using
percentage values and a high z-index
Like this:
CSS
#map-frame { position: relative; }
.map {
display: block;
position: absolute;
width: 5%;
height: 3%;
z-index: 99;
}
.q {
position: absolute;
width: 50%;
height: 50%;
}
.q img {
display: block;
max-width: 100%;
}
.q1 {
top: 0;
left: 0;
}
.q2 {
top: 0;
right: 0;
}
.q3 {
bottom: 0;
left: 0;
}
.q4 {
bottom: 0;
right: 0;
}
HTML
<div id="map-frame">
<a class="map" href="foo.html" style="top: 20%; left: 20%;">
<a class="map" href="foo.html" style="top: 40%; left: 20%;">
<a class="map" href="foo.html" style="top: 20%; left: 40%;">
<a class="map" href="foo.html" style="top: 40%; left: 40%;">
<div id="q1" class="q">
<img alt="" src="q1.jpg" />
</div>
<div id="q2" class="q">
<img alt="" src="q2.jpg" />
</div>
<div id="q3" class="q">
<img alt="" src="q3.jpg" />
</div>
<div id="q4" class="q">
<img alt="" src="q4.jpg" />
</div>
</div>

Put all the content INSIDE A TABLE. Set to 100% width. The iphone doesnt seem to scale tables... I was struggling with this problem as i had my images just lose, or inside a div.
none of the rect coords links were working. But when i put the whole lot inside a table... Well, just try it and see :)

I dig out this post because I've just found a solution to get image map working on iOS.
Put your map within an anchor and listen click/tap events on it, to check if the target element matches with a map's area.
HTML
<a id="areas" href="#">
<img src="example.jpg" usemap="#mymap" width="1024" height="768">
<map name="mymap">
<area id="area1" shape="poly" coords="X1,Y1,X2,Y2...">
<area id="area2" shape="poly" coords="X1,Y1,X2,Y2...">
<area id="area3" shape="poly" coords="X1,Y1,X2,Y2...">
</map>
</a>
JAVASCRIPT
$("#areas").on("click tap", function (evt) {
evt.preventDefault();
if (evt.target.tagName.toLowerCase() == "area") {
console.log("Shape " + evt.target.id.replace("area", "") + " clicked!");
}
});
Tested on iPad4 with mobile safari 6.0

Do not use Default <img usemap="#map"> and <map name="map"> change it. Like <img usemap="#mapLink"> and <map name="mapLink">. It's working !!!

Simply using a # in the usemap attribute appears to solve the problem on iPhone.
For example <img usemap="#mapLink"> and <map name="mapLink">

My solution was easy. I just assigned a height and width in the DIV's css to match the size of the image and everything worked fine. Original image size was 825 x 1068, so
<div style= width: 825px; height: 1068px;">
...
</div>
Hope it helps.

I solved this with only 1 line of code, no JavaScript. Only CSS, you need to use zoom property to scale your image and everything will work fine, just like this
img {
zoom: 0.3;
}

<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,100%,10%" href="blah1"/>
<area shape="rect" coords="0,10%,50%,70%" href="blah2"/>
<area shape="rect" coords="50%,10%,100%,70%" href="blah3"/>
</map>
please try using percentage values inside coordinates

Scriptaculous Draggable/Droppable script not working properly when dragging into a scrolling div

I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?

Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps