Making this contact form responsive with Javascript - javascript

I'm very new to javascript but in mid-level with HTML and CSS.
So here is the issue. I just registered a third party contact form service with Foxyform. They provided a code to paste in the page and upload it. It works fine in desktop views, however when one visits the contact page on different mobile or smaller devices it looks out of space and non-responsive. There is no option to edit it in #media screen within the theme.
Is it possible to make this contact form responsive?
Here are the codes:
HTML:
<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>
Javascript:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));

Your contactform provider includes an iframe in your page.
An iframe can not be styled by the website on which is it included as most browser handle it as an own webpage which is embedded in another webpage.

Found a fix with CSS (not jquery/javascript sorry) ( for googleCalendar iframe ) but I used the same concept for foxyForms iframe.
via https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/
html
<div class="responsiveCal">
<iframe src="https://calendar.google.com/calendar/embed? showTitle=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&height=600&wkst=2&hl=nl&bgcolor=%23FFFFFF&src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&color=%23ffcf03&ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
css
.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}
It allowed me to place a row within the container as well to use bootstraps responsive classes. Hope this is right, I'm still a beginner please feel free to correct any mistakes I made..

Related

iframe and JS function combination

I am currently trying to make a full iframe web-based game to avoid page refresh.
I have this function in JS that works perfect:
function changeUrl(){
var site = "modules/news/news.php";
document.getElementsByName('game_frame')[0].src = site;
}
This is my HTML:
News
<iframe frameBorder="0" style="height: width: 100%; height: 650px; visibility: visible; color: white;" allowtransparency="true" class="content" name="game_frame">
</iframe
But I would like to fetch a value through the function so that I don't have to repeat the code for every page.
I was trying this but I can't get it to work:
function changeUrl(siteName){
var site = "modules/".siteName."/".siteName.".php";
document.getElementsByName('game_frame')[0].src = site;
}
I have tried for about 2 days to fix this but can't seem to find the solution. I might be googling wrong ofc. Thanks in advance for answers :)

How to set image only to a certain parallax section in css

I'm having a problem with my coding on my website. Basically I've inserted the following html code on the page which is my section (section-743):
> <div>
> <div>
> <iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0"
> allowfullscreen></iframe>
and then the following CSS to set the video into the static image:
div {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
}
div iframe {
body.home
box-sizing: border-box;
background: url(http://www.ildottoredellepiante.it/formazione/wp-content/uploads/2017/05/laptop-png-6754.png) center center no-repeat;
background-size: contain;
padding: 1% 17.5% 19.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How can I tell in CSS to show the image and video ONLY in the "section-743" of the website? Rather than like now is showing everywhere in blog post and other widget where it shouldn't show.
I've tried to add:
.section-743
and
#section-743
at the beginning of the CSS but unfortunately it didn't work. Any idea how can I fix this? Basically the laptop image should show ONLY in a parallax section of my website rather than anywhere else.
I look forward to hearing from you.
Thank you for your help in advance! It's a lot appreciated!
Take a look at this article: https://www.w3schools.com/css/css_syntax.asp
What you're looking for are ID and class selectors. These, however, are not magic, and require you to assign them to elements on your page.
I added IDs to the DIV tags from your example (and I added the closing DIV tags):
<div id="outerDiv">
<div id="innerDiv">
<iframe width="315" height="200" src="//www.youtube.com/embed/ucXRLnIkTyQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Now, you can reference the DIV tags in your CSS like this:
#outerDiv {
/* outer div style */
}
#innerDiv {
/* outer div style */
}
#innerDiv iframe {
/* iframe inside innerDiv style */
}
Notice that last one, which allows you to reference the IFRAME that is inside innerDiv.
Keep in mind that your IDs must be unique for the entire page.

How do I embed a part of a webpage with a certain name attribute within my webpage?

There's a webpage. Let's call it Example.html. I can not control/change this webpage but I want to embed a particular portion of it in my webpage.
The Example.html webpage has an HTML code that looks something like this:
<!--[stuff I don't want]-->
<form action="/example/index.pl" method="post" enctype="multipart/form-data" name="windyNights">
<!--[stuff I want!]-->
<\form>
<!--[stuff I don't want]-->
So how do I include the stuff I want in my webpage without including that stuff I don't need? is there a way to use the name attribute to isolate it somehow?
You can use iframe and a specific id of that particular div that you want to show and set the height and width of the iframe according to your target div.
see the example:
#project_summary {
width: 600px;
height: 220px;
padding: 15px 10px;
background:black;
}
<iframe id="project_summary" src="https://towkir.github.io/projectindex/projects.html#rsp" scrolling="no" frameborder="0"></iframe>
visit the link in the iframe separately to understand what is going on.
You can try
$('#target-div').load('http://www.example.com/Example.html form[name="windyNights"]');

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

Phototagging like in Facebook and Orkut album photos?

Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.

Categories

Resources