I am creating a webpage with multiple image. To store the image I am using the following code.
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img
src="some url"></a>
<a class="carousel-item" href="#one!"><img
src="some url"></a>
<a class="carousel-item" href="#one!"><img
src="some url"></a>
</div>
It is working fine. But I want to image in full screen mode once it clicked. for this reason I tried to use materialboxed but it is not working as expected and acting wired. If I add materialboxed class img clicks are not working properly and view is just kind of wired. Is there any way to make it work togather ?
Add attribute class="materialboxed" to the img tags.
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
And Later initiate it with jquery dependence or not
$(document).ready(function(){
$('.carousel').carousel();
});
$(document).ready(function(){
$('.materialboxed').materialbox();
});
If using jquery method make sure to Import jquery first
Related
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
Let's say I have one view
users.handlebars
{{#each users}}
<tr>
<td>{{this.id}}</td>
<td>{{this.profile.firstname}}</td>
<td>{{this.profile.lastname}}</td>
<td>{{this.profile.location}}</td>
<td>{{this.email}}</td>
<td>{{this.profile.status}}</td>
<td><i class="fas fa-user-edit"></i>
<a class="user-ban-btn" href="javascript:void(0)">
<i class="fas fa-hand-paper"></i>
</a>
<a class="user-delete-btn" href="javascript:void(0)"> // THIS IS DELETE BUTTTON
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
{{/each}}
And another
main.handlebars
<div class="modal-box" id="user-delete-modal">
<div class="modal-box-message">
<p>Are you sure u want to delete this user?</p>
YES
NO
</div>
</div>
In first view, I click on button delete user but I need to parse data from this view to the second view where I choose YES or NO because yes have a link with ID parameter /users/delete/:id But i don't know to do it.
Note: Main.handlebars is template and users.handlebars is inserted into this template and that modal box is opened just with javascript there is no page refresh.
I will be thankful for any idea how to make it.
Solved by adding onClick="get_user_id(this.id)" to a element.
And then taking it with javascript.
I'd like to get the information I want from the homepage below.
http://ticket.cgv.co.kr/Reservation/Reservation.aspx?MOVIE_CD=&MOVIE_CD_GROUP=&PLAY_YMD=&THEATER_CD=&PLAY_NUM=&PLAY_START_TM=&AREA_CD=&SCREEN_CD=&THIRD_ITEM=#
To be exact, I want to get all the information of li tag in movie-list nano has-scrollbar-y
<div class="movie-select">
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<li class="rating-15" data-index="0" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
<li class="rating-15" data-index="1" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
...
...
<li class="rating-15" data-index="100" movie_cd_group="20018753" movie_idx="81626">
*************************
**the data that i want!**
*************************
However, when i use the below code to crawling all the information on this homepage. i cannot get data within a particular tag(div class 'list-list').
url = 'http://ticket.cgv.co.kr/Reservation/Reservation.aspx?MOVIE_CD=&MOVIE_CD_GROUP=&PLAY_YMD=&THEATER_CD=&PLAY_NUM=&PLAY_START_TM=&AREA_CD=&SCREEN_CD=&THIRD_ITEM=#'
r = requests.get(url)
soup = BeautifulSoup(r.text)
when i check html page text that get from request.get,
there was no data under
like
</div>
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<ul class="content scroll-y" onscroll="movieSectionScrollEvent();"></ul>
</div>
but when i check chrome , All the information is there!
<div class="movie-list nano has-scrollbar-y" id="movie_list">
<ul class="content scroll-y" onscroll="movieSectionScrollEvent();" tabindex="-1">
<li class="rating-15" data-index="0" movie_cd_group="20018753" movie_idx="81626">
<a href="#" onclick="return false;">
<span class="icon"> </span>
<span class="text">바이스</span><span class="sreader"></span></a></li>
<li class="rating-15" data-index="1" movie_cd_group="20019110" movie_idx="81721">
<a href="#" onclick="return false;">
<span class="icon"> </span><span class="text">미성년</
...
So this is my Question.
how can i get all data within from this homepage?
The data is loaded via javascript.
1) Either use a method like selenium which will allow this rendering to occur before attempting to access
2) Use dev tools and examine the POST XHR to this http://ticket.cgv.co.kr/CGV2011/RIA/CJ000.aspx/CJ_HP_SCHEDULE_TOTAL_DEFAULT and see if it provides the info you want and can be replicated with requests
Your issue is the onclick event. You need to interact with the javascript on that page before beautiful soup can parse it. See this previous answer https://stackoverflow.com/a/29385645/10981724
There is a standard Pager component which renders below html structure:
<div class="xspPagerContainer">
<div class="xspPagerRight" id="view:_id1:pager1">
<span class="xspPagerNav xspFirst" id="view:_id1:pager1__First">
First
</span>
<span class="xspPagerNav xspPrevious" id="view:_id1:pager1__Previous">
Previous
</span>
<span class="xspPagerNav xspGroup" id="view:_id1:pager1__Group">
<span>
<span class="xspFirstItem xspCurrentItem">
1
</span>
<span>
<a>2</a>
</span>
<span class="xspLastItem">
<a>3</a>
</span>
</span>
</span>
</div>
</div>
I would like to add some extra html tags like into above structure:
<div class="xspPagerContainer">
<div class="xspPagerRight" id="">
<span id="NewSpan"></span>
<span class="xspPagerNav xspFirst" id="someId">
First
</span>
<span class="xspPagerNav xspPrevious" id="view:_id1:pager1__Previous">
Previous
</span>
I was trying to use renderer to do it but I was not able to add anything inside xspPagerContainer div. All I achieved was to add something before or after this div.
Is something like this possible? How can I add html tag to already existing component without javascript (jQuery etc.) ? Should I create own component and create own renderer ?
This is IBM variation of JSF used in Xpages.
I'm using Watir to try to interface to the Quibids "Bid Now" (not Buy Now) button but can't seem to get the right combination of the following command to click the button:
browser.button(:value => 'Bid Now').click
I'm able to fill in a text field on the page so all my object set up is correct. It's just this command that I can't get to work. Every attempt gives me the error that the element cannot be found. I've also tried :id but nothing works and after working on it for 2 hours, thought I'd ask.
The following is the html out of IE around that button and any help would be appreciated. Thanks.
<p class="large-price">
<span style="background-image: none;" class="price">$5.68</span>
<span class="medium light-grey">USD</span>
</p>
<p class="time large-timer2 red">00:00:06</p>
<h2 class="margin-five username-height">
<span><img style="display: inline;" class="user-icon winning_avatar" src="https://s1.quibidscdn.com/n1/avatards/12.png" width="64" height="64"></span>
<br>
<span style="height: 30px;" class="winning">TOLLCOLLECTOR</span>
</h2>
<div id="298085604">
<p>
<a class="buttons bid large orange" href="#">Bid Now</a>
</p>
</div>
<script>
$(document).ready(function(){
AuctionDetail.updateSavings({"r":0,"v":0,"value":0});
});
</script>
<ul class="price-breakdown">
<li>Value Price:
<span id="product_valueprice" class="float-right">$649.99</span>
</li>
<li>Bids Credit:
<span class="float-right">- <span id="breakdown_bidsvalue">$0.00</span></span>
</li>
<li class="bid_breakdown last">
<span id="breakdown_realbids">0</span> Real / <span id="breakdown_voucherbids">0</span> Voucher </li>
<li>Buy Now Price<span class="float-right breakdown_buynowtotal">$649.99</span>
</li>
</ul>
<p>
<a id="buynowbtn" class="buynowbtn buttons large blue" href="#">
Buy Now
<span class="clear"></span>
<span class="buynow-price breakdown_buynowbtn">$649.99</span>
</a>
</p>
The HTML does not list it as a button. It lists it as a link- <a>. I've never used WATIR but given that the command is browser.button, it would seem that you need something like browser.link instead.
The process is quicker if you don't do a text scan and use the classes available to you:
I'd recommend using
browser.a(:class => "buttons bid large orange").click
instead, both will work, just generally it would be better practice to use the html if it's available to you!
My Friend...
My two possibilities.
browser.div(:id, "298085604").text(:name "Bid Now").click
or
browser.div(:text, "Bid Now").click
Remember that, the HTML is not displayed all functions, only the HTML code that the browser recognizes. this is the cause of programming language. example (framework, NET) these encrypted language code for the final user. You can not see the button entirely.
Good Luck!