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;
Related
Looking at example
HTML
<ul>
<li>Blueberry</li>
<li>Raspberry</li>
<li>Pear</li>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Mango</li>
<li>Soursop</li>
</ul>
Thinking whether it is possible this way in ractivejs
Like this:
<ul>
{{#each fruit:i}}
{{#if count > 4}}
Show less
{{else}}
<li>{{fruit.name}}</li>
Show more
{{/if}}
{{/each}}
</ul>
If got more items, it would limit only 4 items and display "Show more". Then click on show less after display all item and it will collapse.
Wonder if that is possible? Also would css animation work for class: more and less instead of on-click handlers to expand and collapse? (similar to slide up and down).
Yes, it is possible.
Collapse and expand is merely tracking who is active, and adding the proper display style to those who are. That can be done with plain templating (see upper half of code).
The "show more" can be done in 2 ways:
If you load your data dynamically (via ajax) per load more, then you can just concat to your existing fruits array and use that for iteration.
If your data is already there (you loaded all fruits, yet only want to show a few at a time), you can use a property to track the number of currently displayed, and a computed property to slice the fruits array using that number. Clicking load more will increase that number (say 4 to 8), kicking the computed prop to recalculate using 8 this time.
Here's an example:
<ul>
{{#each slicedFruits:index}}
<li>
<!-- Here, clicking the header sets the current fruit to display -->
<h4 on-click="set('currentFruitIndex', index)">{{name}}</h4>
<!-- Here, we conditionally apply block or none depending on who's showing -->
<div style="display:{{if currentFruitIndex === index}}block{{else}}none{{/if}};">{{details}}
</li>
{{/each}}
<!-- using the built-in `add`, we add 4 to `displayedFruits` -->
<a href="#" on-click="add('displayedFruits', 4)>Load More</a>
</ul>
<script>
component.exports = {
data : {
fruits: [], // load up your fruits here
currentFruitIndex: -1, // change this to any default, -1 for nothing
displayedFruits: 4, // change to how many you liked displayed first
},
computed: {
// We slice the main array `fruits` by `displayedFruits`.
// Changing `displayedFruits` will recalculate this and update the template
slicedFruits: function(){
return this.get('fruits').slice(0, this.get('displayedFruits'));
}
}
};
</script>
As for animation, you can check out Transistions. There's a good example of accordion here.
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 working on a listing page for a custom Dexterity content type, and I'd like to pull one of the images to display in the listing, kind of how a listing page for a folder full of news items shows the thumbnails alongside the title and description (i.e. folder_summary_view).
What's the best way to go about this? I tried customizing the folder_summary_view template to change the thumbnail code to look instead for 'item_object/thumbnail' however it returns an error because it's a blob image or something:
<a href="#" tal:condition="exists:item_object/thumbnail" tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
<img src="" alt="" tal:replace="structure python: path('nocall:item_object/thumbnail')(scale='original', css_class='tileImage')" />
</a>
Returns:
Module Products.PageTemplates.ZRPythonExpr, line 48, in __call__
__traceback_info__: path('nocall:item_object/thumbnail')(scale='original', css_class='tileImage')
Module PythonExpr, line 1, in <expression>
TypeError: 'NamedBlobImage' object is not callable
I guess I'd also be interested in finding out how to call any of the other fields. It pulls the title and description automatically. Is there an easy way to call moar fields? i.e. if there's a text field called: developer_name — how would I display that after Title in the folder summary view?
I saw this question in case that helps, but it seemed to be more related to migration and not displaying content.
The folder_summary_view still needs to be updated for Plone's default news item, like this (works with both; Plone's default Archetype- and Dexterity-newsitem):
<a href="#"
tal:condition="exists:item_object/##images/image"
tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
<img src="" alt=""
tal:replace="structure item_object/##images/image/mini" />
</a>
Where 'image' is the fieldname, in case yours differs.
See plone.app.imaging's README for complete reference.
I hope to find some time soon, to commit this, unless someone else is heading to do it ;)
Note: I think I remember it's not recommended to use python:test() though, maybe that part should be adjusted, too.
For generally rendering your field, you can use good ol':
<div tal:content="structure context/developer_name" />
Tested with a TTW-created Dexterity-CT and a text-field.
See also (with a grokked example):
http://developer.plone.org/reference_manuals/external/plone.app.dexterity/custom-views.html#simple-views
if you look closely to the folder_summary_view template you will find that all you need to do is adding some helper methods to you class:
<a href="#"
tal:condition="exists:item_object/image_thumb"
tal:attributes="href python:test(item_type in use_view_action, item_url+'/view', item_url)">
<img src="" alt=""
tal:replace="structure python: path('nocall:item_object/tag')(scale='thumb', css_class='tileImage')" />
</a>
we did something similar in collective.nitf by creating a getImage, imageCaption, tag and image_thumb functions (you probably won't need them all).
also, note the image attribute that will map the getImage function.
class NITF(Container):
implements(INITF)
...
# The purpose of these methods is to emulate those on News Item
def getImage(self):
"""Return the first Image inside the News Article."""
content_filter = {'portal_type': 'Image'}
images = self.listFolderContents(content_filter)
return images[0] if len(images) > 0 else None
image = getImage # XXX: a hack to support summary_view
def imageCaption(self):
image = self.getImage()
if image is not None:
return image.Description()
def tag(self, **kwargs):
# tag original implementation returns object title in both, alt and
# title attributes
image = self.getImage()
if image is not None:
scales = image.restrictedTraverse('##images')
if 'scale' in kwargs:
scale_id = kwargs.get('scale')
del kwargs['scale']
else:
scale_id = 'thumb'
kwargs['alt'] = image.Description()
kwargs['title'] = image.Title()
scale = scales.scale(fieldname='image', scale=scale_id)
return scale.tag(**kwargs)
def image_thumb(self):
"""Return a thumbnail."""
image = self.getImage()
if image is not None:
view = image.unrestrictedTraverse('##images')
# Return the data
return view.scale(fieldname='image', scale='thumb').data
take a look at that code.
I have a long list of <li>s. A piece of JQuery code below helps me to style the last words of each <li>. Please take a look here
The issue now is I don't want it apply the style to the last <li>.
Could could I do that?
Here is my whole code. Please take a look
<html>
<script>
$(document).ready(function(){
$('li').each(function(){
var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/);
var lastWord = words.pop();
words.push('<span class="Red">' + lastWord + '</span>');
$this.html(words.join(' '));
});
});
</script>
<style>
.Red{color:red}
</style>
<body>
<li>my holy tag galore</li>
<li>my sandwich is balloney</li>
<li>the expected is not to be </li>
<li>oh REALLY? </li>
<script type="text/javascript" src="JQuery-1.10.2.js"></script>
</body>
</html>
Thank you very much!
The only problem I see is your "Red" and "Bold" classes might not really be defined actually. I've tested your code myself and it works just fine - it adds the said classes to the last word.
However, just to keep it simple (um, alright ... for the RegEx's sake) you could use the replace function, just like this:
$('li').click(function(){
var $t = $(this);
$t.html($t.text().trim().replace(/(\w+)[.!?]?\s*$/, "<b>$1</b>"));
});
It surrounds the last word with <b></b> tags. Just replace them with whatever you like. The click event is also for the sake of testing, you can always change it to each function or anything else, really.
Here's a break down on how this RegEx actually works:
https://stackoverflow.com/a/3648147/1368043
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.