Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a view with multiple projects. Some of these are running and some aren't
In the function if a deadline is passed it will output the 'days' as a zero on the view. (so this are the non-running projects) They remain visible on the view with the running projects. But ofcourse the running projects are shown with (for example) 24 days left or something.
Now what I want to do: If a project deadline has passed and the output is '0' I want to create a blurry layer over the div.
I have the following function working:
function get_all_open_designments($now) {
$this->db->where('active', 1);
$this->db->where('deleted !=', '1');
$this->db->order_by('date_to', 'DESC');
$designments = $this->db->get('designments')->result_array();
foreach ($designments as &$designment_info) {
$designment_info['image'] = self::get_image_for_designment($designment_info['designment_id']);
$designment_info['count_joined'] = self::get_users_count_joined_by_id($designment_info['designment_id']);
$designment_info['count_ideas'] = self::get_users_count_ideas_by_id($designment_info['designment_id']);
$date_to = $designment_info['date_to'];
$diff = $date_to - $now;
$days = round($diff / 86400);
$time_left = $days . ' days';
if($days <= 0){
$days = 0;
$time_left = $days . ' days';
}
$designment_info['time_left'] = $time_left;
}
return $designments;
}
Is there a way to put a code there if the 'days' are '0' put a blurry layer over it.
The code beneath is the code for the view:
<script type="text/x-mustache" id="designment_template">
<div class="designment_view item">
<ul class="box-div bg-white shadow">
{{#image}}
<li>
<img width="302" src="{{image}}"/>
</li>
{{/image}}
<li class="p15 orange ff-b" style="font-size: 21px">
{{title}}
</li>
<li class="p15 black ff-l" style="font-size: 14px">
{{small_description}}
</li>
<li class="h45 black tc ff-l f14">
<dl class="clearfix bg-lightgrey user-dash-dl tc">
<dd class="fl br-1 lh36" style="width:74px" title="Cash reward for selected idea">
<p class="f11 ff-l lh12 pt33 reward"></p>
<p class="ff-m f12">{{reward}}</p>
</dd>
<dd class="fl br-1 lh36" style="width:74px" title="Amount of days left until the deadline">
<p class="f11 ff-l lh12 pt33 timeleft"></p>
<p class="ff-m f12">{{time_left}}</p>
</dd>
<dd class="fl br-1 lh36" style="width:74px" title="Amount of joined designers">
<p class="f11 ff-l lh12 pt33 joinedpeople"></p>
<p class="ff-m f12">{{people}}</p>
</dd>
<dd class="fl lh36" style="width:74px" title="Amount of uploaded ideas">
<p class="f11 ff-l lh12 pt33 ideascount"></p>
<p class="ff-m f12">{{idea}}</p>
<!-- mous over-->
</dd>
</dl>
</li>
{{#joined}}
<a class="joined" data-id="{{id}}" data-url="<?= site_url('app/dashboard/id') ?>/{{id}}">
<li class="btn-designment clearfix h45 tc orange ff-b f14 lh45" style="cursor: pointer;">
<div class="designment-arrow"></div>
{{/joined}}
{{^joined}}
<a class="joinable" data-id="{{id}}" data-url="<?= site_url('app/dashboard/id') ?>/{{id}}">
<li class="btn-designment clearfix h45 tc orange ff-b f14 lh45" style="cursor: pointer;">
<div class="designment-join-arrow"></div>
{{/joined}}
</li>
</a>
</ul>
</div>
There would be multiple things you need to take care of.
You have to pass $days as single parameter from controller to view.
Add condition in view to check if $days are 0 or not, if
yes then add a blank div within main div.
Add appropriate styles to the main div and the blank div.
Give relative position to min div and absolute position to blank blurry div. Apply styles as you want.
Related
I am trying to insert a snippet of HTML code after each feed item using JQuery, however whatever I try it still doesn't work. I have displayed the HTML code below of the page I am trying to edit. I am trying to get some HTML to be inserted after every feed time (every time it finishes with class="wp_rss_retriever_container">)
<div class="wp_rss_retriever">
<ul class="wp_rss_retriever_list">
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/man-united-ready-to-smash-transfer-record-to-sign-star-striker/" title="Man United ready to smash transfer record to sign star striker">
Man United ready to smash transfer record to sign star striker
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:29 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/fenerbahce-plan-bid-for-manchester-united-ace-mata/" title="Fenerbahce plan bid for Manchester United ace Mata">
Fenerbahce plan bid for Manchester United ace Mata
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:15 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/united-arsenal-target-morata-premier-league-would-suit-me/" title="Manchester United, Arsenal target Morata: Premier League would suit me">
Manchester United, Arsenal target Morata: Premier League would suit me
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 11:55 am
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/manchester-united-rival-arsenal-liverpool-for-juventus-striker-morata/"
The code i tried to use to get it to work is
$( "<p>Test</p>" ).insertAfter( ".wp_rss_retriever_container" );
You could use each to iterate over all the .wp_rss_retriever_container class:
$('.wp_rss_retriever_container').each(function(i, obj) {
$(this).append("<p>Test</p>"); //or .html()
});
If you want it to be 'limited amount of times' you could condition and break if 'i' is equal to some value:
if(i == 5){ break; } // only 4 'test' will be added
Hope it helps to you!
What I need:
Show 'article_footer' by default
When I pass 'article_footer_base' > 'article_footer' hides
When I then scroll back up passed 'article_footer_base' > 'article_footer' then becomes visible again.
Tried a million things - cant get it to work :( Help!? The below just doesn't really work at all. I've just been trying to nab stuff of SO
My HTML:
<div class="d3-d10">
<div class="article_header">
<h1>{{ title }}</h1>
<ul class="center">
<li><a href="/profile/{{ username }}" class="user_avatar">{{ gravatamatic:quicky
email = "{email}"
size = "32"
}}</a></li>
<li>{{ username }} on {{ current_date format="M jS, Y" }}</li>
</ul>
</div>
</div>
<div class="d3-d10 article_content">
{{ copy }}
</div>
<div class="d3-d10 source_link article_block_element">
{{ if source_link }}
<p class="center">Article originally published at {{ source_link }}</p>
{{ /if }}
<span class="icon-emblem"></span>
</div>
<div class="d3-d10 article_block_element article_footer_base">
<ul class="left">
<li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
</ul>
</div>
My footer (being called in a partial):
</section> <!-- Ending full width section -->
<div class="article_footer">
<ul class="left">
<li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
</ul>
<ul class="right">
<li><button class="global_btn_white"><span class="icon-saved"></span> save for later</button></li>
<li><span class="icon-twitter"></span></li>
<li><span class="icon-facebook"></span></li>
<li><span class="icon-flag"></span></li>
</ul>
</div>
My JS:
/**
* Article more dropdown
*/
$('.article_footer').show();
var entryheight = $('.article_footer_base').height();
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 350 && y < entryheight) {
$('.article_footer').fadeOut();
} else {
$('.article_footer').fadeIn();
}
});
TL;DR
The jQuery that will work is the following:
/**
* Article more dropdown
*/
$('.article_footer').show();
var entryheight = $('.article_footer_base').offset().top;
$(document).scroll(function () {
var y = $(window).scrollTop() + $(window).height();
if (y > entryheight) {
$('.article_footer').fadeOut();
} else {
$('.article_footer').fadeIn();
}
});
TS;WM
(too short, want more)
First, we remove magic numbers. I don't know what 350 stands for, and neither will anyone else.
Then, we check what we need. In this case, it's the offset of the item. The offset, in short, is the distance the item is from the top. We put it in the variable entryheight, as shown above. Now, on scroll ($(document).scroll()), all we need to do is compare the scrollTop() from the window to the offset from the item. If y (the scroll position of the window + the height of the window) is bigger than entryheight, we know we've passed .article_footer_base. Else, we want .article_footer visible.
Here you can see it working: http://jsfiddle.net/m7kjzbmv/4/
I am 95% finished with this (I hope). I am working on an accordion function that changes the text in the head of the accordion depending if the accordion is opened or closed. (I've got a plus and minus image working).
At present if the client clicks on the accordion to open and close it the title changes correctly, but if the client opens a different accordion the original accordion will slide up, but the title is not updated. I've tried a couple of options I thought would work, but no success as yet.
I've made a jsfiddle here
jquery is:
$(document).ready(function() {
// accordion functionality
$('.accordion-head').click(function(e){
var content = $(this).parent().find('.accordion-content');
var head = $(this).parent().find('.accordion-head');
var $showMore = "Show me more";
var $hideContent = "Hide this offer";
content.addClass('actual');
$('.accordion-content').not('.actual').each(function(){
if ($(this).hasClass('accordion-opened')){
$(this).slideUp(200,function(){
$(this).toggleClass('accordion-opened');
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
});
}
});
$(this).toggleClass('accordion-open');
content.removeClass('actual');
if($(this).hasClass('accordion-open')){
content.slideDown(200,function(){
content.toggleClass('accordion-opened');
head.html($hideContent);
});
}else{
content.slideUp(200,function(){
content.toggleClass('accordion-opened');
head.html($showMore);
});
}
e.preventDefault();
});
});
HTML looks like this:
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including Thames Water, Severn Trent, Anglian Water, Yorkshire Water and many more, plus all council tax local authorities. Cashback on mortgage payments up to maximum monthly mortgage payment of £1,000.
</div>
</div>
<span class="spacer"></span>
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including British Gas, SSE, EDF Energy, E.ON, npower and many more.
</div>
</div>
<span class="spacer"></span>
etc.
Hope someone can help.
You could rewrite the header during the collapse loop by removing head.html($showMore) & changing
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
to
$(this).parent().find('.accordion-head').toggleClass('accordion-open').html($showMore);
You can also insert $('.accordion-head').html($showMore); inside click function , which will update all the headers intially to show more and then update the individual headers according to the conditions.
var $showMore = "Show me more";
var $hideContent = "Hide this offer";
$('.accordion-head').html($showMore);
content.addClass('actual');
I have this list structure:
<ul class="pol list">
<li>
<div class="tekst">
<h2><span class="name"></span></h2>
<p class="description"></p>
<div class="commentsBar1">
<div class="commentsBarL1">
<h5>
<strong class="category">
<span style="display:none;"></span>
<span class="d">27.12.2011</span>
</strong>
</h5>
<h5><strong></strong></h5>
</div>
</div>
</div>
</li>
<li>
<div class="tekst">
<h2><span class="name"></span></h2>
<p class="description"></p>
<div class="commentsBar1">
<div class="commentsBarL1">
<h5>
<strong class="category">
<span style="display:none;"></span>
<span class="d">03.03.2012</span>
</strong>
</h5>
<h5><strong></strong></h5>
</div>
</div>
</div>
</li>
</ul>
I need js that will hide all list tags which contain a date outside of a certain range. The date range is given by user and both start and end dates are given in same way as dates in the list (dd.mm.yyyy).
<input id="Date1" name="Date1">
<input id="Date2" name="Date2">
I have this date comparison code:
var dControl = document.getElementsByClassName("d");
var d1Control = document.getElementById("Date1");
var d2Control = document.getElementById("Date2");
var arrD = dControl.value.split(".");
var dd0 = new Date(arrStartDate[2], arrStartDate[1], arrStartDate[0]);
var arrD1 = d1Control.value.split(".");
var dd1 = new Date(arrStartDate[2], arrStartDate[1], arrStartDate[0]);
var arrD2 = d2Control.value.split(".");
var dd2 = new Date(arrStartDate[2], arrStartDate[1], arrStartDate[0]);
if((dd0 <= dd2 && dd0 >= dd1)) {
return true;
}
return false;
And one more thing... The number of list elements varies from page to page so I also need to get some idea about the list size, but that I assume is easy to do with "length".
Any ideas how can I achieve this?
You will need to write javascript to build the dom based on the dates you have. I suggest using a templating framework such as mustache or handlebars to keep your code tidy.
just run through the elements with class "d" and check if they meet your date criteria if not then set that li to display "none". you will have to find the li in the DOM node tree which appears to be 8 levels higher that your date.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Getting text within element excluding decendants
I have the following function:
function initCBox(){
CB_Init();
var img1 = $(select.currentImg).attr('src');
var label = $(select.currentImg).attr('alt');
var desc = $('.item.active .caption').not($('.description')).text();
CB_Open('href=' + img1 + ',,title=' + label + ',,comment=' + desc +'');
}
with the following html:
<div class="item" title="Light" href="Light.jpg" >
<img class="content" alt="Amber Light" src="slides/Light.jpg"/>
<div class="caption">Light
<ul class="icon">
<li class="ui-state-default ui-corner-all" title="More Info">
<div class="description ui-icon ui-icon-comment">
<div class="description_holder" style="display:none">Amber Light
<br />Enter Text or HTML Here</div>
</div> </li>
</ul>
</div></div>
I want my var = desc to only show the text in the class "caption", not anything in the <ul class="icon"> ( for simplicity, I only include one <li> item but I have others in the <ul>). Need help with my excluding all but the caption text. Hope I haven't been too confusing!
You can do a string find and replace:
var desc = $('.caption').text(), // The caption and stuff you don't want
noWant = $('.icon').text(); // Only stuff you don't want
desc = desc.replace(noWant,""); // Find stuff you don't want and replace w ""
The advantage if this way over excluding descendants, is that it will grab the entire text of your description even if includes <span>s, <strong>s, etc.