I am using Zurb 5.5.3 with Modernizr v2.8.3. - I am using CSS and do NOT wish to use SASS.
Below are two Browerstack screenshots of http://iprobesolutions.com/event-support/conference-interpreters, one of iPhone 6 plus and the other of Google Nexus 6.
Could someone tell me the step by step to fix the left and right margin so there the next is not right against the edge of the mobile devices ? It has the same issue on various other medium screens I tested in Browserstack.
I found below literature from source: https://zurb.com/university/lessons
/change-foundation-s-default-breakpoints but I don't understand what I'm actually supposed to do...I thought Foundation would automatically size for mobile...
If you take a content-first approach, measure in ems or rems.
>$row-width: rem-calc(1000);
>$column-gutter: rem-calc(30);
>$total-columns: 12;
Since I have content edit authority I may prefer a content first approach but I don't know what to do and where I'm supposed to add media queries and which ones using CSS.
[
[
<!doctype html>
<html class="no-js" lang="en-us"> <!--remove the "-us"? -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Established in New York City in 2001, iProbe remains a founder led business offering first class service and support">
<title>Conference Interpreters| iProbe Live Event Support Services</title>
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/foundation-footer.css"> <!-- Must add #relative_template_path# -->
<link rel="stylesheet" href="/css/foundation-features.css">
<link rel="stylesheet" href="/css/foundation-article-card.css">
<link rel="stylesheet" href="/css/custom.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<!-- <link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="/favicon_32x32.ico"/> -->
<script src="/js/vendor/modernizr.js"></script>
<script src="https://use.typekit.net/jsu5jyh.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="row">
<!-- Header and Nav -->
<header>
<!--#include file="/scripts/tools/top-bar-nav.html" -->
</header>
<!-- End Header and Nav -->
<!-- START Breadcrumbs -->
<div class="row">
<div class="large-12 columns">
<div>
<nav id="breadcrumbs" class="breadcrumbs">
Home
Live Event Services
<a class="current" href="/event-support/conference-interpreters">Conference Interpreters</a>
</nav>
</div>
</div>
</div>
<!-- END Breadcrumbs -->
<div class="row">
<section class="large-12 columns">
<h1>our interpretation services</h1>
<p class="marketing">we offer interpreters for conferences, seminars and other live events:</p>
<ul>
<li>A pool of highly qualified interpreters</li>
<li>Professional sourcing and recruitment tools</li>
<li>A selection process to qualify interpreters </li>
<li>Expertise in interpretation standards, techniques and best practices</li>
<li>A technical understanding of language distribution systems</li>
</ul>
<h2>service</h2>
<p>Our interpretation terms of service encompass the following:</p>
<ul>
<li>qualified interpreters will be assigned to fit the specific event requirements</li>
<li>our interpreter coordinator or project manager will promote working conditions to allow for optimal performance of the interpreters</li>
<li>our project manager will stay informed of audio visual technical specifications that are required for multilingual meetings</li>
<li>when dealing with third party stakeholders, we will collaborate representing your best interest in the creation of a successful event.</li>
</ul>
<p>as a professional interpretation service provider we specialize in providing interpreters for corporate meetings. We also provide interpreters for Film and TV production.</p>
<p>we offer the benefit of fifteen years industry experience providing first rate interpreters for a variety of bilingual and multilingual meetings, conferences and other events.</p>
</section>
</div>
<div class="row">
<section class="small-12 medium-8 columns">
<h1>our guarantee: skilled accredited interpreters for your event</h1>
<p class="name">iProbe's interpreters have either a professional or para-professional level of accreditation authorities</p>
<p>professional interpreters are bound by a strict code of ethics covering confidentiality, impartiality, accuracy and reliability, and have completed training and assessment to certify that they have level of linguistic competence.
</p>
<p>our selection process to secure quality conference interpreters for our clients takes into account the language combination, the subject matter, work experience, current and past employers, membership at professional associations, education and aptitude for the assignment. The interpreter is evaluated on the required technique (consecutive, simultaneous, whispering) and experience in similar environments. We understand the importance of the interpreter’s performance and we spare no effort to ensure that the interpreters we provide have the necessary training and experience to satisfy our clients’ needs.
</p>
</section>
<div class="row">
<section class="small-12 medium-4 columns">
<div id="sidebar" class="events-press-cta panel sticky">
<h1 class="subheader">prefer to book interpreters yourself?</h1>
<p>if you prefer to keep the interpreter selection inhouse, you can book the interpreters yourself and still avail yourself of our simultaneous interpretation equipment rentals to distribute the languages.</p>
<p>for suggestions on how to find the best simultaneous interpreters for your corporate events, conferences and conventions in and outside the United States, feel free to refer to our Interpreter Recruitment Guide <strong>(link coming soon).</strong>
</p>
</div>
</section>
</div>
</div>
<div class="row">
<div class="small-12 medium-8 columns">
<div class="panel">
<p>let us help you to select the right interpreters. Contact our interpretation specialists.</p>
<p><i class="fi-telephone"></i>+1-212-489-6035</p>
<p><i class="fi-mail"></i>info#iprobesolutions.com</p>
<!-- <p class="button">Call <b>212-489-6035</b></p> -->
</div>
</div>
</div>
<!--#include file="/scripts/tools/aside-ad-rentals.html" -->
</div>
<!--#include file="/scripts/tools/footer.html" -->
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
It is not a good idea to use a .row directly inside .row , removing the .row will fix the issue.
<body>
<div class="row">
Good way:
<div class="row">
<div class="columns">
<div class="row">
<div class="columns"></div>
</div>
</div>
</div>
Wrong way:
<div class="row">
<div class="row">
<div>
<div class="columns"></div>
</div>
</div>
</div>
Related
I want to upload a jpg file to imgur and get the jpg's link.
I have imgur API's Client Id and Client Secret.
Delphi code as below:
procedure TfrmMain.Button6Click(Sender: TObject);
var
client: TRESTClient;
request: TRESTRequest;
response: TCustomRESTResponse;
begin
client := TRESTClient.Create(nil);
try
client.BaseURL := 'https://api.imgur.com/';
Client.AddParameter('Client ID', '...', TRESTRequestParameterKind.pkHTTPHEADER);
Client.AddParameter('Client Secret', '...', TRESTRequestParameterKind.pkHTTPHEADER);
request := TRESTRequest.Create(nil);
try
request.Client := client;
request.Method := rmPOST;
request.Resource := 'a/C11W7xC';
request.Accept := 'application/json';
request.AddParameter('image','D:\linedw.jpg' , pkFile);
request.Execute;
response := request.Response;
if response.Status.Success then
begin
mo_response.Lines.add('Success: ' + slinebreak + response.Content);
end
else
begin
mo_response.Lines.add('Failed ' + response.StatusText + ': ' + slinebreak + response.Content);
end;
finally
request.Free;
end;
finally
client.Free;
end;
end;
The error information from response.Content is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>imgur: the simple 404 page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<meta name="keywords" content="images, funny pictures, image host, image upload, image sharing, image resize" />
<meta name="description" content="Imgur is home to the web's most popular image content, curated in real time by a dedicated community through commenting, voting and sharing." />
<meta name="copyright" content="Copyright 2014 Imgur, Inc." />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;" />
<link rel="stylesheet" type="text/css" href="https://s.imgur.com/min/404.css?1393899213" />
<!--[if IE 9]><link rel="stylesheet" href="https://s.imgur.com/include/css/ie-sucks.css?0" type="text/css" /><![endif]-->
</head>
<body>
<div class="nodisplay">
Imgur is home to the web's most popular image content, curated in real time by a dedicated community through commenting, voting and sharing.
</div>
<div id="hallway">
<div class="container">
<div id="cat1" class="painting">
<img src="//s.imgur.com/images/404/cat1weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="cat2" class="painting">
<img src="//s.imgur.com/images/404/cat2weyes.png">
<div class="eye-container">
<div class="eye">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="giraffe" class="painting">
<img src="//s.imgur.com/images/404/giraffeweyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
<img class="monocle" src="//s.imgur.com/images/404/monocle.png" />
</div>
<div id="cat3" class="painting">
<img src="//s.imgur.com/images/404/cat3weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="cat4" class="painting">
<img src="//s.imgur.com/images/404/cat4weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer textbox">
<h1>Zoinks! You've taken a wrong turn.</h1>
<p>Let's split up, gang. If you're looking for an image, it's probably been deleted or may not have existed at all.</p>
<p>If you are looking for groovy images, visit our gallery!</p>
<img src="https://s.imgur.com/images/imgurlogo-header.png">
</div>
<script type="text/javascript">
(function(widgetFactory) {
widgetFactory.mergeConfig('analytics', {
isAdmin: false
});
})(_widgetFactory);
</script>
<script type="text/javascript" src="https://s.imgur.com/min/404.js?1393899213"></script>
<script type="text/javascript">
var e404 = E404.getInstance();
e404.generalInit();
</script>
</body>
</html>
I have no experience with calling a REST API. I searched for Delphi demo information, but I did not find much. I need some guidance about this.
Delphi 10.4 / Windows 10
You are trying to upload an image to an invalid resource a/C11W7xC on the server, which is why you get an HTTP 404 Not Found response with HTML content.
According to the documentation, the resource for uploading images is 3/upload instead.
I haven't used the API myself, but it seems to me that the authorization you are using is not in line with Imgur's authorization.
Imgur's API allows you to upload images either anonymously via an Authorization: ClientID {YOUR_CLIENT_ID} HTTP header, or using an Authorization: Bearer {YOUR_ACCESS_TOKEN} HTTP header to tie the uploaded image to your account. See Authorization and OAuth on how to obtain the access token.
Note that you should not share your client credentials with the whole world, it has secret in its name, afterall. I recommend you should renew your client credentials at this point.
Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
Looking at Google email markup - specifically the Review Action. The following dummy example is provided:
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ReviewAction">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/FoodEstablishment">
<meta itemprop="name" content="Joe's Diner"/>
</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1"/>
</div>
</div>
<div itemprop="handler" itemscope itemtype="http://schema.org/HttpActionHandler">
<link itemprop="url" href="http://reviews.com/review?id=123"/>
<div itemprop="requiredProperty" itemscope itemtype="http://schema.org/Property">
<meta itemprop="name" content="review.reviewRating.ratingValue"/>
</div>
<link itemprop="method" href="http://schema.org/HttpRequestMethod/POST"/>
</div>
</div>
<meta itemprop="description" content="We hope you enjoyed your meal at Joe's Diner. Please rate your experience."/>
</div>
Is there someway to customize this to function as a review for a Google Plus page?
ReviewAction requires you enter a URL that review data gets submitted to. Google+ reviews do not offer such an API so the best you can do is ask users to leave a review and link to the list of reviews.
I have used Bootstrap 3 to create a page with a fixed nav bar top. In the body I have elements with #anchor tags. When I click from the nav bar, the element position is displayed but there seems to be a misalignment of the row (approximately the height of the nav bar) - BS3.0 docs say you need to put the padding-top of the body to the height of the nav bar (50px in this case) and have the body position relative. There have been posts about the docs not being correct and I can't seem to fix this...
here is a fiddle: http://jsfiddle.net/richnasser/fkLh9sf4/1/ and the full screen http://jsfiddle.net/richnasser/fkLh9sf4/1/embedded/result/
Click on 'about' and the scrolling should stop at the top of the Santa Claus header. In my browser (Chrome) it goes well beyond that, hiding the headline. Any insights would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>North Pole Industries</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNavBar">
<div class="container-fluid">
<div class="navbar-header">
<button class ="navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">
<span class = "glyphicon glyphicon-list-alt"></span>
</button>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li class="active">home</li>
<li>capabilities</li>
<li>client list</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class = "row" id="home">
<div><img src= "http://placekitten.com/1200/600" class="img-responsive" alt="kitty"></div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive" alt="grey"></div>
</div>
<div class = "row">
<div class="col-md-3" id="about"><h3>Santa Claus <small>chief</h3></small><p class="text-justify">Santa brings over fifteen years of experience in the auto industry through a combination of roles in marketing, field work and wind tunnel studies. His success is derived from innovative thinking and a keen ability to solve complicated problems. Santa has worked in both US and International markets doing both strategic and tactical marketing.</p>
Read More</div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="santa"></div>
<div class="col-md-3" class="headshot"><img src= "http://placehold.it/260x400" class="img-responsive" alt="rudolf"></div>
<div class="col-md-3"><h3>Rudolf <small>dog</h3></small><p class="text-justify">Rudolf counts on over fifteen years experience delivering leadership and marketing capabilities to auto and technology companies, creating profitable and sustainable business growth. He built his reputation on a solid commitment to customers, passion for marketing excellence, and a strong climate of teamwork.</p>
Read More</div>
</div>
<div class = "row">
<div><img src= "http://placehold.it/1200x400" class="img-responsive"></div>
</div>
</div>
and the css
body {
position: relative;
padding: 50px;
}
You can achieve this using simple JavaScript. Below Fiddle will help you to figure it out.
http://jsfiddle.net/ianclark001/aShQL/
In the above fiddle code, update the fromTop height as per your fixed header height.
var fromTop = 50; // Give Your fixed header height
And also you can find more information at:
offsetting an html anchor to adjust for fixed header
I have used this solution, with no javascript, only css, and worked for me:
Give your anchor a class:
<a class="anchor" id="top"></a>
You can then position the anchor an offset higher or lower than where
it actually appears on the page, by making it a block element and
relatively positioning it. -250px will position the anchor up 250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
You can adjust the top to the size of you navbar.
i want to parse a xhtml file and display in UITableView. what is the best way to parse xhtml file so that i could be able to display as it is shown in browser. here is a sample xhtml source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wheel</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet.css"/>
<link rel="stylesheet" type="application/vnd.adobe-page-template+xml" href="../page-template.xpgt"/>
</head>
<body>
<h2 class="h2"><a id="page_x"></a><a id="page_xi"></a><a id="page_xii"></a><a id="table"></a>TABLE OF CONTENTS</h2>
<p class="content2"><strong>WHAT’S THE BIG IDEA?</strong></p>
<p class="content2"><strong>CHOOSING</strong></p>
<p class="content2"><strong>AUTHOR’S NOTE</strong></p>
<p class="content2"><strong>THE STORY OF OG</strong></p>
<p class="content">Chapter # 1: Og Gets an Idea</p>
<p class="content">Chapter # 2: Dazed By the Possibilities</p>
<p class="content">Chapter # 3: Aargh!</p>
<p class="content">Chapter # 4: The Grunt of the Town</p>
<p class="content">Chapter # 5: Getting Around To It</p>
<p class="content">Chapter # 6: Og’s Head Is Full, But the Cupboard Is Empty</p>
<p class="content">Chapter # 7: The Big Meating</p>
<p class="content">Chapter # 8: The Path Is Made By Walking On It</p>
<p class="content">Chapter # 9: Crouch</p>
<p class="content">Chapter #10: An Arrow to the Heart of the Matter</p>
<p class="content">Chapter #11: Nothing to Get</p>
<p class="content">Chapter #12: Smoke From a Fire, Flakes From a Stone</p>
<p class="content">Chapter #13: The Happy Accident</p>
<p class="content">Chapter #14: The Center Is Everything</p>
<p class="content">Chapter #15: Sleeping Like a Rock</p>
<p class="content">Chapter #16: Follow Your Feet</p>
<p class="content">Chapter #17: Everyone’s Turn</p>
<p class="content2"><strong>WHAT OG LEARNED:</strong> 12 Wheely Good Best Practices</p>
<p class="content2"><strong>TOOLING UP:</strong> 35 Ways to Get the Wheels Turning</p>
<p class="content2"><strong> IN STONE:</strong> The Tools and Techniques Contest</p>
<p class="content2"><strong>NEXTING:</strong> the Future</p>
<p class="content2"><strong> ROLL:</strong> Resources for Thinking Outside the Cave</p>
<p class="content2"><strong>O<span class="smallcaps2">G</span>CASTING:</strong> Your Free Audio Bonus</p>
<p class="content2"><strong>ABOUT THE AUTHOR</strong></p>
</body>
</html>
I would strongly recommend using libxml2 for parsing html or xhtml. I followed this tutorial http://cocoawithlove.com/2008/10/using-libxml2-for-parsing-and-xpath.html but took few iterations to get the loops going properly.
Another good approach would be to create a web service of your own that does xhtml parsing on the server side and returns well structured json result. This way you are in control of parsing in case something changes to the html structure you could easily update your parser on the server side (there by avoiding going through another app update process).
Another approach is using UIWebView, let it use only to load the Document and make use of DOM Class to access Data