I'm trying to integrate this card styling (https://codepen.io/simeydotme/pen/PrQKgo) into my rails app. But it seems quite difficult to do so because my code generates the image URL on the HTML, but this CodePen has its image URLS declared in the CSS inside a variable like --charizardfront:.
My qestion is, how can you modify this CodePen so that it works by taking the URLs from the HTML instead?
The CodePen and my project uses SCSS, so perhaps that give us more options?
This is my _profile-quest_cards.html.erb code for the card/s that I want to style if anyone is interested:
<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>
I've tried the method suggested by ChatGTP, but that doesn't work on codepen:
"You can add a data-* attribute to the div element that contains the image, and assign the value of quest_card.url to it. Then in the SCSS code, you can select that div, and use the attr() function to get the value of the data-* attribute, and assign it to the --charizardfront variable.
Here's an example of how you could do this:
HTML:
<div class="card charizard animated" data-charizard-front="https://cdn.midjourney.com/42ada987-b1aa-4797-a4be-b8cc4a6a6b13/grid_0.png"></div>
SCSS:
--charizardfront: url(attr(data-charizard-front));
When I try that on Codepen, the card image doen't show. Hope I can accomplish my task without using javascript, but if that's the best soloution then I'll take it. Thank you!
HTML divs don't use urls as attributes. You're probably looking for
<img>
Try something like
<img src='path'></img>
Related
I have a (I hope) simple question. Is there a way to change something like
<div id='THE_ID' class='filter_group'> subtags </div>
to
<div id='THE_ID' class='filter_group open'> subtags </div> in capybara?
This website I'm looking at has a non-descript <a> tag as a button that edits the div class as seen above.
I'd rather click the <a> tag but it being non-descript has no information. No name, no id, no href, nothing.
I'm new to rails and capybara so please forgive me if I'm missing something simple
The code block I am looking at is
<div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
<label class="header">Date Range
<span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
<a></a>
</label>
<div class="list">
RADIOBUTTONS and FIELDS
</div>
</div>
What you're asking is possible using JS, however then you're not really testing the site (assuming you're testing and not just scraping). To do it via JS with Capybara 3.2+ you could do
page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange").execute_script("this.classList.add('open');")
Prior to 3.2 you would need to do something like
el = page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange")
page.execute_script("arguments[0].classList.add('open');", el)
That being said, there are plenty of ways to click the <a> even if it doesn't have any usable attributes (assuming it has size on the page) by scoping to it
page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange > .header > a").click
Here is some code (Sorry it's pure javascript I didn't see the part of your question where it says it's ment to be with cappybra):
function yourFunction() {
var element = document.getElementById("ctl00_ContentPlaceHolder1_as1_divDateRange");
element.classList.add("open");
}
.open {
color:red;
}
<button onclick="yourFunction()">Add class</button>
<div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
<label class="header">Date Range
<span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
<a></a>
</label>
<div class="list">
RADIOBUTTONS and FIELDS
</div>
</div>
The CSS part is to demonstrate that the class has beeen added.
Hope I helped you and others :)
I need to create a UIKit grid like this:
This is my code:
<div className="uk-grid uk-grid-collapse">
<div className="uk-width-5-8">
<div className="uk-grid">
<div className="uk-width-1-2">.Variable..</div>
<div className="uk-width-1-2">..Modelo.</div>
<div className="uk-width-1-2">..Mes.</div>
<div className="uk-width-1-2">..Escenario.</div>
</div>
</div>
<div className="uk-width-1-8">BUSCAR</div>
<div className="uk-width-2-8">RANGE</div>
</div>
I've followed the example on https://getuikit.com/docs/grid.html (Nested Grid) but I can't get it, this is what I got:
Any tip? Could be fault of another css? I'm using an html template based on UIkit.
UPDATE: When I remove this width I got what I need:
But I can't edit that source, there must be another way to do it. Adding width inline won't work.
Excuse me, but please remove className from your html, use class instead;) And it seems that theres no 5-8ths in grid docs neither in src folder(have looked, but couldn't find)
I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.
I have tried adding <div id="bottom">
</div> but nothing is working. It appears to skew the entire section when I add this syntax.
I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.
Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.
Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!
You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/
<div id="bottom">
SHOP NOW
<div id="price">$70.00</div>
</div>
You can wrap the div element in an anchor element to have it link to your chosen url / file.
i.e.
<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>
This should be the code:
https://jsfiddle.net/RreTH/
Edit:
This will make the whole div element link to google for linking just the text the should be enough to link only the text.
Simply change the basket div to <a>:
<a id="basket" href="http://www.google.com">SHOP NOW</a>
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.
LESS is very cool. I always wondered if there are any good html generators that allow me to write a form more easily or do other things. Is there something somewhat similar but for html?
Tried Haml?
From its website, this Haml code:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
gets converted into this HTML.
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
If you like Haml, then you might also like Sass, which is Haml for CSS. Actually, Haml comes with Sass. You can still use LESS if you like.
Check out Zen-Coding.
Uses a CSS style markup to generate HTML with some nice features.
Did one Blended-HTML On-line Layout Generator
Uses CSS3 and HTML5 markup to generate the source code for HTML page layout on-line.