I'm using the jj-nextgen-jquery-carousel plugin for wordpress, the problem I'm having with it is that the carousel disappears when I resize the browser. I'm not sure if this is a jQuery problem, or if the plugin is conflicting with the Twenty Ten theme?
<div id="jcarousel" style="display:block; width:885px; height:75px;">
<?php echo do_shortcode('[jj-ngg-jquery-carousel html_id="carousel-test-two" skin_class="jcarousel-skin-property" gallery="3" width="162" height="75" visible="5" gap="21" scroll="1" auto="1"]'); ?>
</div>
That's the code I'm using in my header.
Thanks
This bug is documented here: https://github.com/jsor/jcarousel/issues/64
You can fix this issue if you edit the jcarousel.js file directly as described in comment #11 of the bug.
Change line 287 from this:
if (i + 1 < self.first) {
to this:
if (parseInt(jQuery(this).attr('jcarouselindex')) < self.first) {
Related
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
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
i want to find all timecodes in my content area and build a simple link around it, so i can jump to a specific timecode on my Wordpress Mediaelement.
How can I do this so it finally looks like:
<div class="timecodes">
<li>
**<a class="go-to-time">**15:30**</a>** "Title"
</li>
</div>
I figured it out by myself, here is my solution:
var str=document.getElementById("timecodes").innerHTML;
var n=str.replace(/[0-9][0-9][:][0-9][0-9]/gi,function myFunction(x){return "<a class='go-to-time'>" + x + "</a>";});
document.getElementById("timecodes").innerHTML=n;
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.
I'm Web Developer and almost never work with design but have been given this bug which I'm struggling to rectify.
Some images appear correctly when I print/display the print preview page, however others don't. The key difference that I can see is that the images that don't appear are span tags with the image applied in css whilst the working images use the img tag.
Here are examples of the html:
Span with "icon" birth does not display:
<li class="media">
<div class="img">
<div class="h2 mtm">1889</div>
<span class="timeline-icon icon-birth"></span>
</div>
<div class="bd">
<h3 class="profile-subtitle mts">Born in ?</h3>
<p class="deemphasis mbn">
Search for Birth Record
</p>
</div>
</li>
Image.gif does display:
<li class="media">
<div class="img">
<div class="h6">
<strong>Spouse</strong></div>
<img src="image.gif" alt="" class="person-thumb dropshadow" />
</div>
<div class="bd">
<p class="mbn">Husband</p>
<h3 class="profile-subtitle">
Thomas <strong>Name</strong>
</h3>
<p class="mbn">?-?</p>
</div>
</li>
In some browsers it looks ok in the preview but does not print, in others it doesn't and still does not print.
Thankyou in advance!
I had the same problem over two months ago. I had a button that redirected users to a printer-friendly page and then I triggered print dialog using Javascript.
The problem was that browsers did not wait till images specified in CSS background were downloaded.
I put timeout before triggering the print dialog to give browser time to download images. This approach is not reliable since nobody has constant download speed and it would open the print dialog before the images are downloaded to users with very slow Internet connection.
In the end, I used HTML img tags to embed images on my page and jQuery to trigger the print dialog when the last image is downloaded.
You need to put delay before print. There is a native bug in chrome. Code would as under :-
function PrintDiv(data) {
var mywindow = window.open();
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write(data);
if (is_chrome) {
setTimeout(function() { // wait until all resources loaded
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to winPrint
mywindow.close(); // change window to winPrint
}, 250);
} else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
Just add the below styles to make it work img{max-width:100%;height:auto;}
Its the width of the image being set to 0 in the print which is causing the issue.
make a print stylesheet, set your span to display:block