trying to create a function that make's a div slide down depending on it's ID using jquery.
Trying to get it done as a efficiently as possible.
Here's what I have so far:
$('.meet-the-team').on('click', function() {
var member = $(this).id();
var parts = member.split();
var id = parts[parts.length - 1];
$(".member-profile #profile" + id).slideDown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-g meet-the-team">
<div class="pure-u-1-4 meet-the-team-a" id="member-a">
A
</div>
<div class="pure-u-1-4 meet-the-team-b" id="member-a">
B
</div>
<div class="pure-u-1-4 meet-the-team-c" id="member-a">
C
</div>
<div class="pure-u-1-4 meet-the-team-d" id="member-a">
D
</div>
</div>
<div class="pure-g member-profile member-profile-a" id="profile-a">
<div class="pure-u-10-24 member-profile-left">
<h1>Jordon McCord</h1>
<h2>Designer/User Experience</h2>
<i class="fa fa-linkedin-square fa-6"></i>
</div>
<div class="pure-u-14-24 member-profile-right">
<p>Jordan is a User Interface and User Experience Designer with over 8 years of experience working on a range of exciting projects utilising his key skills in design and front end web development. Jordan is passionate about design and user interactions
and in his spare time, he really enjoys writing about himself in the third person.</p>
</div>
</div>
<div class="pure-g member-profile member-profile-b" id="profile-b">
<div class="pure-u-10-24 member-profile-left">
<h1>Adam McCord</h1>
<h2>Designer/User Experience</h2>
<i class="fa fa-linkedin-square fa-6"></i>
</div>
<div class="pure-u-14-24 member-profile-right">
<p>Jordan is a User Interface and User Experience Designer with over 8 years of experience working on a range of exciting projects utilising his key skills in design and front end web development. Jordan is passionate about design and user interactions
and in his spare time, he really enjoys writing about himself in the third person.</p>
</div>
</div>
Why does this not work?
Thanks in advance for the help guys.
$('.meet-the-team div').on('click', function() {
var member = $(this).attr('id');
var parts = member.split('-');
var id = parts[parts.length - 1];
$(".member-profile-" + id).slideDown();
});
This should work. You could also use $("#profile-" + id).slideDown(); instead of the $(".member-profile-" + id).slideDown();.
Related
My end result is supposed to be a list of objects in html. Bootstrap behind this. I'd like for the list to be created dynamically so I don't have to manually create all the divs because I don't know how many there will be. Here's what I have.
I have an array similar to this:
activities =
[
{
"activityOwner": "Raymond Carlson",
"activityDesc": "Complete all the steps from Getting Started wizard"
},
{
"activityOwner": "Flopsy McDoogal",
"activityDesc": "Called interested in March fundraising Sponsorship"
},
{
"activityOwner": "Gary Busy",
"activityDesc": "Get approval for price quote"
}
]
This is the first part where I'm not sure what to do. I can assign the element ids individually for my html like this but what I'd like to do is count how many elements are in my array and create these for me. I won't know how many there are to make these manually. I'm sure there needs to be a loop but I couldn't figure it out.
document.getElementById('activityowner0').innerHTML = activities[0].activityOwner;
document.getElementById('activitydesc0').innerHTML = activities[0].activityDesc;
document.getElementById('activityowner1').innerHTML = activities[1].activityOwner;
document.getElementById('activitydesc1').innerHTML = activities[1].activityDesc;
document.getElementById('activityowner2').innerHTML = activities[2].activityOwner;
document.getElementById('activitydesc2').innerHTML = activities[2].activityDesc;
etc.
etc.
And then...once I have that part, I'd like to know how to create my html divs dynamically based on how many elements are in my array. Again, right now I don't know how many there are so I'm having to create a bunch of these and then have extras if I have too many.
<div class="container">
<div class="row"></div>
<div class="qa-message-list" id="wallmessages">
<br>
<div class="message-item" id="m0">
<div class="message-inner">
<div class="message-head clearfix">
<div class="user-detail">
<h5 class="handle">
<p id='activityowner0'></p>
</h5>
<div class="post-meta"></div>
</div>
</div>
<div class="qa-message-content">
<p id='activitydesc0'></p>
</div>
</div>
</div>
I know this is a big ask so just pointing me in the right direction would be very helpful. I hope my question was clear and I appreciate it.
One way for you to achieve this would be to loop through the objects in your activities array. From there you can use a HTML template to store the base HTML structure which you can clone and update with the values of each object before you append it to the DOM.
In addition, an important thing to note when generating repeated content in a loop: never use id attributes. You will either end up with duplicates, which is invalid as id need to be unique, or you'll end up with ugly code generating incremental/random id at runtime which is unnecessary. Use classes instead.
Here's a working example:
const activities = [{ "activityOwner": "Raymond Carlson", "activityDesc": "Complete all the steps from Getting Started wizard"}, {"activityOwner": "Flopsy McDoogal","activityDesc": "Called interested in March fundraising Sponsorship" }, { "activityOwner": "Gary Busy", "activityDesc": "Get approval for price quote" }]
const html = activities.map(obj => {
let item = document.querySelector('#template').innerHTML;
item = item.replace('{owner}', obj.activityOwner);
item = item.replace('{desc}', obj.activityDesc);
return item;
});
document.querySelector('#list').innerHTML = html.join('');
<div id="list"></div>
<template id="template">
<div class="container">
<div class="row"></div>
<div class="qa-message-list">
<div class="message-item">
<div class="message-inner">
<div class="message-head clearfix">
<div class="user-detail">
<h5 class="handle">
<p class="activityowner">{owner}</p>
</h5>
<div class="post-meta"></div>
</div>
</div>
<div class="qa-message-content">
<p class="activitydesc">{desc}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<div class="list-group-item-action" >
Deve
<p>Deve Category.</p>
</div>
<div class="list-group-item-action" >
Deve2
<p>Software development life cycle (SDLC) </p>
</div>
<div class="list-group-item-action" >
dev
<p>Software development life cycle </p>
</div>
New to js and jquery plz help
Requirement:-
Take values from a and p tag in such a way
Deve
Deve Caetgory
Deve2
software development life cycle
----
----
and it should be get downloaded plain/text format.
Here i can make functionality for printing but how can I append all value to one string by taking them from tags
Use loop using div class like below.
$('.list-group-item-action').each(function (index, element) {
var aText = $(this).find('a').text();
var pText = $(this).find('p').text();
console.log(aText);
console.log(pText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item-action" >
Deve
<p>Deve Category.</p>
</div>
<div class="list-group-item-action" >
Deve2
<p>Software development life cycle (SDLC) </p>
</div>
<div class="list-group-item-action" >
dev
<p>Software development life cycle </p>
</div>
Basically the needed loop can be done as follows:
var result = '';
$('.list-group-item-action').each(function() {
result += '\n' + $(this).find('a').html();
result += '\n' + $(this).find('p').html();
});
$('#result').val(result);
You can see the example here: https://jsfiddle.net/8d06f7y4/
Question
How can I replace a < with an anchor as an HTML wrapper?
Background
I am getting a JSON value with a Twitter user's name as something like
<jgallardo949>
Since i don't want that printed to the page:
i want to replace the < with <a
href="twitter.com/{{data.author}}">
and the > with </a>
The end result in the code will be jgallardo949
The end result on the page will just be: jgallardo949
I referenced other similar questions that I was able to find here and elsewhere. I got a start with the answers on Replace string of text javascript
My followup practice worked. But specifically the > symbol is having a challenge, or i am missing something?
Code
The top two work, the last one does not
HTML
<div class="label">With Profits Financial Strength:</div>
<div class="data rating">****</div>
<div class="data2 thing">+</div>
<div class="author twitter"> > </div>
JS
var str=document.getElementsByClassName("data" ,"raiting")[0].innerHTML;
var n=str.replace(/\*/g,"star");
document.getElementsByClassName("data", "raiting")[0].innerHTML=n;
var str2=document.getElementsByClassName("data2" ,"thing")[0].innerHTML;
var n2=str2.replace(/\+/g,"<h1>moon</h1>");
document.getElementsByClassName("data2", "thing")[0].innerHTML=n2;
var str3=document.getElementsByClassName("author" ,"twitter")[0].innerHTML;
var n2=str3.replace(/\>/g,"<h1>moon3</h1>");
document.getElementsByClassName("author", "twitter")[0].innerHTML=n2;
A > in HTML gets returned as > so doing like this (\>|>) and it will find both.
var n2=str3.replace(/(\>|>)/g,"<h1>moon3</h1>");
Stack snippet
var str=document.getElementsByClassName("data" ,"raiting")[0].innerHTML;
var n=str.replace(/\*/g,"star");
document.getElementsByClassName("data", "raiting")[0].innerHTML=n;
var str2=document.getElementsByClassName("data2" ,"thing")[0].innerHTML;
var n2=str2.replace(/\+/g,"<h1>moon</h1>");
document.getElementsByClassName("data2", "thing")[0].innerHTML=n2;
var str3=document.getElementsByClassName("author" ,"twitter")[0].innerHTML;
var n2=str3.replace(/(\>|>)/g,"<h1>moon3</h1>");
document.getElementsByClassName("author", "twitter")[0].innerHTML=n2;
<div class="label">With Profits Financial Strength:</div>
<div class="data rating">****</div>
<div class="data2 thing">+</div>
<div class="author twitter"> > </div>
I'm trying to hide or show a banner based on screen size. However, it's not showing any banners in IE9 when it should be. Here is my code:
<?php
// Template Setup
// Set SEO Infomation
// Available setting can be found under /app/extensions/Master-data.php
$this->set_master('page_title', 'Cancer Patient Assistance and Reimbursement for HCPs | Lilly PatientOne');
$this->set_master('meta_description', 'Lilly PatientOne offers financial assistance, patient assistance, and medical reimbursement for qualified cancer patients who are prescribed a Lilly Oncology product.');
$this->set_master('meta_keywords', 'patient assistance, cancer patient assistance, patient reimbursement, medical reimbursement, cancer patient assistance program, financial assistance for cancer patients');
$this->set_master('page_classes', 'index hcp');
$this->set_master('pageTitleHeader', 'PatientOne Access Services');
$this->set_master('pageTitleSubheader', 'Reimbursement <span class="bullet">•</span> Financial Assistance <span class="bullet">•</span> Product Replacement');
$this->set_master('site_nav', 'nav-hcp');
$this->set_master('site_footer', 'footer-hcp');
//$this->quick_link('Link Text', 'http://link-href.com');
// Set Layout
// Options:
// 'layouts::content-page' : 2 column
// 'layouts::wide' : wide
// 'layouts::home' : home
$this->layout('layouts::content-page');
// Page Content
?>
<div class="brand-image">
<div class="no-desktop mobile-banner">
<div class="blue-banner-mobile">
<p>Update your billing and coding systems to include the permanent CYRAMZA<sup>®</sup> (ramucirumab) J-code: J9308, injection, ramucirumab, 5 mg. Issued by the Centers for Medicare & Medicaid Services (CMS), this permanent J-code is effective as of January 1, 2016.</p>
</div>
</div>
<div class="mobile-banner-spacing">
<div class="banner-mobile-spacing small-desktop brand-image-wrapper content-container mobile-padding">
<div class="large-desktop center-this">
<?= $this->insert("partials::logo"); ?>
</div>
<div class="top-text center-this">
<h1>PatientOne Access Services</h1>
<p class="letterspace">Reimbursement • Financial Assistance • Product Replacement</p>
<p class="p-two">Talk to a PatientOne representative</p>
<p class="phone">Call <span>1-866-4PatOne</span><br/>(1-866-472-8663)</p>
</div>
<div class="home-bricks">
<ul class="clearfix">
<li class="brick-one brick">
<div class="brick-outer-wrapper">
<div class="brick-wrapper">
<h3>Find co-pay and financial assistance</h3>
<img src="../../assets/img/icons/brick_one_ico.png" alt="Lilly | Oncology"/>
<p>Learn about the options available for your patient.</p>
<a class="btn formsButton" href="financial-assistance-program.php" title="View now">View now</a>
</div>
</div>
<div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
alt="Lilly | Oncology"/></div>
</li>
<li class="brick-two brick">
<div class="brick-outer-wrapper">
<div class="brick-wrapper">
<h3>See if your patient qualifies</h3>
<img src="../../assets/img/icons/brick_three_ico.png" alt="Lilly | Oncology"/>
<p>Read the eligibility requirements for PatientOne.</p>
<a class="btn formsButton" href="lilly-patientone-eligibility.php" title="Learn more">Learn
more</a></div>
</div>
<div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
alt="Lilly | Oncology"/></div>
</li>
<li class="brick-three brick">
<div class="brick-outer-wrapper">
<div class="brick-wrapper">
<h3>Enroll your patient</h3>
<img src="../../assets/img/icons/brick_two_ico.png" alt="Lilly | Oncology"/>
<p>You need only one application for all PatientOne services.</p>
<a class="btn formsButton" target="_blank" href="/assets/pdf/patient_assistance_program_application.pdf" title="Go to form">Go
to form</a>
</div>
</div>
<div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
alt="Lilly | Oncology"/></div>
</li>
</ul>
</div>
</div>
<div class="blue-banner-main desktop-only">
<p>Update your billing and coding systems to include the permanent CYRAMZA<sup>®</sup> (ramucirumab) J-code: J9308, injection, ramucirumab, 5 mg. Issued by the Centers for Medicare & Medicaid Services (CMS), this permanent J-code is effective as of January 1, 2016.</p>
</div>
</div>
<div class="main-content-banner-spacing"> </div>
<div id="mainContent" class="content-container mobile-padding">
<div class="column-one">
<h2>Help your patients stay focused on treatment. <br/>Not how to pay for it.</h2>
<p id="last">For some patients, especially those without insurance, facing the cost of cancer treatment may be
almost as difficult as the diagnosis itself. When you prescribe a Lilly Oncology product, Lilly PatientOne
provides a resource for access and reimbursement assistance. Through PatientOne you may be able to help your
qualified patients get the assistance they need, allowing them to start treatment with one less worry.</p>
<div class="colButton">
<a href="financial-assistance-for-cancer-patients.php" title="Learn more about our programs">Learn more
about our programs</a>
</div>
<h2>Patient Access Specialists, available through PatientOne</h2>
<div id="boxParagraph">
<p>Patient Access Specialists provide information and education to help you navigate the complex access and reimbursement landscape. We’re here to help make access to prescribed Lilly Oncology products easier for your patients.</p>
<p>To learn more, call <span class="lillyNumber noWrap">1-866-4PatOne (1-866-472-8663)</span>.</p>
</div>
</div>
<div class="column-two">
<?= $this->insert("partials::helpful-links"); ?>
</div>
</div>
</div><!-- end mobile-banner-spacing -->
<script>
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w);
if(w < 769) {
document.getElementsByClassName('blue-banner-mobile')[0].style.display = "block";
} else {
document.getElementsByClassName('blue-banner-main')[0].style.display = "block";
}
</script>
I check "Can I Use" for browser support reference, and it says it's supported. Am I missing something, or is there some kind of IE9 quirk I'm not aware of?
IMHO, I guess you miss some configuration or meta tag in your html head as IE needs standards mode, i have faced this issue once and i solved it by adding ,
<!Doctype html>
also i have seen adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> solves it in some sites
Hope this helps!
I am currently trying to scrape links and thumbnails from this SITE with the help of casperjs. I was able to easily figure out the html structure(shown below). I am trying to extract from all a tags the link found in the href attribute. I run my script but I get an error for video_links . How could I go about scraping all links and thumbnails and output in an array?
Error
TypeError: 'undefined' is not an object (evaluating 'video_links.length')
Script
var casper = require('casper').create({}),video_links,video_thumbnails;
//Functions
function getLinks() {
var element = document.querySelectorAll('.cne-episode-block a');
return Array.prototype.map.call(element, function(e) {
return e.getAttribute('href');
});
}
casper.start('http://video.wired.com/');
casper.then(function() {
video_links = this.evaluate(getLinks);
});
casper.run( this.echo(video_links.length + ' links found.') );
HTML
<div class="cne-thumb-grid-container cne-context-container">
<div class="cne-thumb cne-episode-block " data-videoid="551dc13461646d11aa020000">
<div class="cne-thumb-image cne-rollover" data-powertiptarget="551dc13461646d11aa020000">
<a class="cne-thumbnail cne-zoom-effect js-ajax-video-load" href="/watch/angry-nerd-will-netflix-s-daredevil-fly-or-flop" data-video-series="Angry Nerd" data-video-series-id="518d55c268f9dac897000003" data-video-id="551dc13461646d11aa020000" data-video-categories="[" Movies \u0026 TV "]">
<img class="cne-video-thumb" src="http://dwgyu36up6iuz.cloudfront.net/heru80fdn/image/upload/c_fill,d_placeholder_thescene.jpg,fl_progressive,g_face,h_151,q_80,w_270/v1428076783/wired_angry-nerd-will-netflix-s-daredevil-fly-or-flop.jpg" alt="Will Netflix’s Daredevil Fly or Flop?">
<div class="cne-thumbnail-play">Play</div>
</a>
</div>
<div class="cne-thumb-title the-thumb-title">
<a class="js-ajax-video-load" href="/watch/angry-nerd-will-netflix-s-daredevil-fly-or-flop" data-video-id="551dc13461646d11aa020000">Will Netflix’s Daredevil Fly or Flop?</a>
<div class="cne-thumb-subtitle">
Angry Nerd
</div>
</div>
<div id="551dc13461646d11aa020000" class="cne-thumb-rollover">
<div class="cne-thumb-rollover-box">
<span class="cne-rollover-category"> Movies & TV </span>
<span class="cne-rollover-name"> Will Netflix’s Daredevil Fly or Flop? </span>
<span class="cne-rollover-description"> If Netflix’s new Daredevil series is anything like Ben Affleck’s Daredevil film, we’re all in trouble. Angry Nerd explains what the latest incarnation needs to get right to make sure the man without fear doesn’t turn into a total flop. </span>
</div>
</div>
</div>
</div>
If the selectors are on the same level, you will only need one of them. So just use either cne-thumb or cne-episode-block in your querySelectorAll not both.