I am working on html and Css, for code is getting dynamically so I cannot post the code that's why I am attaching a picture of code. My problem is how to remove Iframes from code using display none Css property. I need to remove first and second iframe from a parent of id='wrapper'.
If you have any questions please ping me once.
You can edit their style with javascript.
count = 0
var div = document.querySelector('#wrapper')
for (var iframe of div.children){
if (count < 2 && iframe.tagName === "IFRAME"){
iframe.setAttribute('style', 'display: none;')
count ++;
}
}
<div id="wrapper">
<p>This is ignored</p>
<iframe style="display:block">Removed</iframe>
<p>This is also ignored</p>
<iframe style="display:block">Removed</iframe>
<iframe style="display:block; background-color:green;"></iframe>
</div>
The count can be how many iframes you want to edit. Note, only the iframes will be removed, and not any other elements before or between the iframe because of the second condition in if loop
Related
I am currently using the Flatiron Template in Squarespace 6. Each image in the gallery currently displays the image, a title, and -view- under it. I am looking to change -view- to a different name (a city to be specific) that is unique to each gallery item.
The source code for one of the grid items is this:
<script>
Y.use('squarespace-ui-base', function(Y) {
Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
});
</script>
<!-- Main Grid -->
<div id="grid" data-collection-id="53ebab59e4b0c8271c405596">
<div class="item">
<a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3" >
<div class="wrapper">
<div class="project-title">
<h2>DIESEL POP-UP</h2>
<h3>— view —</h3>
</div>
</div>
<img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg" data-load="false" />
<noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>
</a>
</div>
I have tried using this in the custom CSS section (just to attempt at targeting one item) but it has only effected the page that the image links to, not the image itself.
.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
background-color: red;
}
Is there a code that can target each individual element?
Go to:
Page > Settings > Advanced > Header injection (Index page)
Then paste the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".item:nth-child(1) h3").text("1st item");
$(".item:nth-child(2) h3").text("2nd item");
$(".item:nth-child(3) h3").text("3rd item");
$(".item:nth-child(4) h3").text("4th item");
});
</script>
Cool. Now you can change the text in the quotations (1st, 2nd, 3rd, 4th item) to whatever text you want to replace 'view'. If you have more than 4 galleries in the index, you can copy a line and paste it below, but just make sure to increase the nth-child item from (4) to (5).
Hope that helps!
Thanks for adding the additional data. Unfortunately you cannot do this. Changes in SquareSpace are global changes. You can make a cosmetic change to all galleries but you cannot target a specific gallery by ID. Squarespace object IDs are dynamic and session based. If you target a specific object ID in your CSS, once you refresh the page the ID will change and the CSS will no longer be valid.
However if there is a scenario where you have individual galleries on separate pages then you can work around the global change by inserting the CSS at the "page" level under settings and not a the site level that calls the object category (not the object ID).
Also changing the content of a label is not a css change. That is an HTML change. In Squarespace you cannot modify/hack the actual HTML in the templated versions.
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.
I'm a beginner at all this however i will do my best to explain.
I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.
I used the following code:
CSS:
.imgA1 {
position:absolute; top: 0px;
left: 0px; z-index: 1; } <br> .imgB1 {
position:absolute; top: 0px; left:
100px; z-index: 3;
}
HTML:
<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!
All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.
I hope all this makes sense.
Anyway help/advice would be fantastic.
Kind regards,
Steve
What i want to do is add a link to the "imgB1" section above...
Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.
< img class=imgB1 src="images\headings\red_heading_email.jpg">
Now clicking on the image will launch site visitors default mail client with "to" the mail address "myname#mail.com".
I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:theemail#address.com
<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me#me.com'>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>
You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.
i think what you want is:
< img class=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">
with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.
Andy
it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:
$(document).ready(function() {
$('.imgB1').each(function() {
$(this).prepend('<a href="link_to_point_to">');
});
});
Note that I've not tested it
If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:
<script type="text/javascript">
function sendEmail() {
var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
var user = "test";
var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto
var mailto_link = 'mailto:' + user + '#' + domain + '?subject='+subject;
win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
if (win && win.open &&!win.closed) win.close();
}
</script>
<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>
< img class=imgA1 src="images\headings\red_heading.jpg">
< img class=imgB1 src="images\headings\red_heading_email.jpg">
You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.
You will have to add an html anchor tag to the img.
By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"
I'm building a dummy widget for a iGoogle/Netvibes like portal. This is a "Google Maps" widget, as it only renders a map centered on a specific location.
The widget looks good in all browsers but IE8, in which the height I specify to the <div> that contains the map is not taken into account.
Here's the interesting part of the code:
<body onload="initialize()" >
<div id="map_canvas" style="height:400px; width: 100%;"></div>
</body>
I have no control on the portal, so the only thing I can modify is the widget itself. I also tried to set the height for the <body>, but same thing.
Any idea on why it's not working in IE?
Thanks!
Put this in the page you're calling with the iframe:
<script type="text/javascript">
var iframes = window.parent.document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i ++)
{
if(iframes[i].src == window.location)
{
iframes[i].style.height = '400px';
}
}
</script>
If you are on 2 different domains, this isn't possible, and unfortunately there is no other way when supplying the <iframe> directly to the end-user. The best solution would be to instead give the user a script tag that generates the <iframe> tag using a document.write()
Example script tag to give to your client:
<script type="text/javascript" src="http://www.example.com/widget-getter.js?client=[clientid]&widget=[widgetid]"></script>
Contents of the script that the above tag would call:
document.write('<iframe height="400px" src="http://www.example.com/widget.html"></iframe>');
Did you try using the height attribute of the iframe tag?