I am making a image slider in react.js. made images div . overflow scroll. I want the current scrollbar value of the images div, like window.scrollY, for checking radio button when the scroll value is coming particular position.
function Events() {
const images = [
"https://picsum.photos/id/0/5000/3333",
"https://picsum.photos/id/1/5000/3333",
"https://picsum.photos/id/2/5000/3333",
"https://picsum.photos/id/3/5000/3333",
"https://picsum.photos/id/4/5000/3333",
"https://picsum.photos/id/5/5000/3333"
]
const [scrolled,setScrolled] = useState(1)
const events2 = document.querySelector("#images")
const slide = () =>{
if(events2.scrollLeft > 100){
console.log("hi")
}
}
return (
<div className='events' id='events' >
<div className='images' id="images" onScroll={slide}>
{images.map((obj) => {
return (
<div className="image">
<img src={obj} alt="NETWORK ERROR" draggable="false" />
</div>
)
})}
</div>
<div className="radio">
<input type="radio" name='img' defaultChecked />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
</div>
</div>
)
I am used console.log("hi") for testing. but it is not working. And I used scrollLeft for getting vertical value of the images div. not working why?
Related
hope any of you could help me out in here...
On the code below I have 2 separete elements which I want to show one at the time.
first element is an iframe
second is a Div
the ideia is if the user click on the {title} then the frame disaper and the div appear.
I can manage to make the frame disapper and appear by clicking on the title, but the same does not happen with the div.
the code is basically the same, so I don't really get why is the div not having the same behavior then the frame.
Also I double checked and both css classes get changed as expected, just that the css class seems not to work on the Div.
Tks in advance.
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
className={`${content ? 'content_site' : 'content_frame'}`}
and
className={`${content ? 'content_frame' : 'content_site'}`}
are contrandicting each other because both are expecting content to be true change one to be !content
change the second one as you can see in your method setContent(!content)}
like this:
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${!content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
I'm trying to make the background change whenever the user is uploading an image, the background is set on default however, I found that I have to use <input /> but then I got stuck
this my work so far !
const [backgroundShown, setBackgroundShown] = useState(false);
const changeBackground = () => {
setBackgroundShown(!backgroundShown);
};
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
It sounds like you want to remove the button when the user "uploads".
If so, just conditionally render it when the user hasn't uploaded.
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
{!file &&
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
}
Not sure what other info I could supply besides one of the columns that would be helpful. I'm stumped.
[edit] Added full code for this component. This looks fine on desktop but not on my phone or tablet. See the photos. I'm repeating this because I can't save my edits to this question due to having too much code and not enough information so here I am rambling about nothing.
Mobile:
Desktop:
import React, { Component } from 'react';
import API from '../utils/API';
class Attendance extends Component {
state = {
selectedOption: "",
disabled: ""
};
handleOptionChange = (changeEvent) => {
this.setState({
selectedOption: changeEvent.target.value
});
};
handleFormSubmit = (formSubmitEvent) => {
formSubmitEvent.preventDefault();
if (!this.state.selectedOption) {
return;
} else {
this.setState({
disabled: "true"
})
API.updateAttendance(this.props.student._id, { present: this.state.selectedOption });
}
};
render() {
return (
<div className="col d-flex justify-content-end" >
<form onSubmit={this.handleFormSubmit}>
<div className="row mt-3">
<div className="col-sm-3">
<label className="text-danger">
<input
type="checkbox"
value="absent"
checked={this.state.selectedOption === 'absent'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Absent
</label>
</div>
<div className="col-sm-3">
<label className="text-warning">
<input
type="checkbox"
value="excused"
checked={this.state.selectedOption === 'excused'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Excused
</label>
</div>
<div className="col-sm-3">
<label className="text-success">
<input
type="checkbox"
value="present"
checked={this.state.selectedOption === 'present'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Present
</label>
</div>
<div className="col-sm-3">
<div className="form-group">
<button type="submit" className="btn btn-sm btn-dark" onSubmit={this.handleFormSubmit} disabled={this.state.disabled}>
<i className="fas fa-user-check" />
</button>
</div>
</div>
</div>
</form>
</div>
);
}
}
export default Attendance;
I've got a modal contact us window that pops up, with a drop down listing where you select a category. I'm trying to figure out a way to reset the selected item when the modal is closed either by the cancel button or the x button. So far the only way I've figured out how to do this is by quickly refreshing the page (see the CloseAndRefresh function near the bottom) when either of the buttons are clicked. This is not ideal because if someone has entered data and not submitted it, refreshing will erase it all. Is there an easier way to achieve this without refreshing?
Below is the code for my modal button
#Html.ModalButton( string.Empty, Rxcs.Contact + " " + Rxcs.Support, "none", "HelpContactSupport" )
<div id="page-contact-form">
X
#using (Html.BeginForm( "ContactHelp", "emails", FormMethod.Post ))
{
<div class="row">
#if (Request.IsAuthenticated && Session["PersonID"] != null)
{
<input type="hidden" name="address" value="#ViewContext.GetContext().people.Find(Session["PersonID"]).Email" />
}
else
{
<label for="address" class="medium-2 columns text-right">Email Address:</label>
<div class="medium-10 columns">
<input type="text" name="address" id="address" />
</div>
}
<div class="medium-2 hide-for-small columns"> </div>
<div class="medium-10 columns">
<p>#Rxcs.What_is_your_question</p>
</div>
<label class="medium-2 columns text-right" for="contactCat">
#Rxcs.Category
</label>
<div class="medium-10 columns" id="selectParent">
#Html.DropDownListing( "contactCat", new SelectList( ViewContext.GetContext().contact_category, "ID", "CategoryNameEnglish" ) )
</div>
<div id="bodyParent">
<input type="hidden" name="Subject" value="Contact Help on Page: #Request.Url.AbsoluteUri" class="col-md-10" />
<label class="medium-2 columns text-right" for="body">#Rxcs.Body.Replace( "English", "" ).Replace( "anglais", "" )</label>
<div class="medium-10 columns">
<textarea rows="10" cols="100" name="body" id="body"></textarea>
</div>
<input type="submit" value="#Rxcs.Send" class="button float-right" onclick="$('#contactCat').next().children().first().css('border', '1px solid #f00');return $('#contactCat').val() != '';" />
</div>
<a class="button inline float-left" onclick="CloseAndRefresh()">#Rxcs.Cancel</a>
<script>
function CloseAndRefresh() {
location.href = '#';
javascript: history.go(0);
}
</script>
<br />
</div>
}
</div>
#Html.ModalButtonEnd()
I did this by clearing dropdownlist selection and then assign it's text to the first text Here is a code snippet might be help you
dropdownname.ClearSelection();
dropdownname.Items.FindByText(Your Text).Selected = true;
I'm looking for a CSS/JQuery method of keeping a DIV (which contains navigation buttons) visible when scrolling or content extends the viewable window size.
I have come across CSS code like this:
.element { position:fixed; Bottom:0px }
But my request is for use within a pop up window / dialog and this code doesn't seem to work for my scenario.
I have a pop up window which displays a 'next' and 'previous' button at the bottom and each "page" is a fieldset which is animated in or out of view.
There are a few fieldsets which go beyond the height of the pop up window and so the scroll activates. But I want to keep my button DIV in view at all times, along the bottom of the pop up window.
Trying to use the CSS above does not seem to set the element within the pop up window, rather it is positioning based on the parent window.
Is there a way to create a fixed DIV to remain visible when scrolling within a pop up window?
Any help would be greatly appreciated.
EDIT:
Code for the pop up window:
<div id="win1" class="FormDiv">
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li id="liDetails" class="active firstLi">User Details</li>
<li id="liLevel">Level Selection</li>
<li id="liAccess">Access Items</li>
<li id="liSummary">Summary</li>
</ul>
<!-- fieldsets -->
<fieldset id="fsDetails">
<h2 class="fs-title" id="FormStep1Title">Enter user details</h2>
#*<h3 class="fs-subtitle">This is step 1</h3>*#
<div class="fs-leftDiv">
<input type="text" name="RequestedFor" id="RequestedFor" placeholder="Requested For " readonly title="Requested For" tabindex="-1" />
<input type="text" name="DirectorateName" id="DirectorateName" placeholder="Directorate " title="Directorate" tabindex="1" style="border-color:red;" />
<input type="text" name="Dept" id="Dept" placeholder="Department " title="Department" tabindex="3" />
<input type="text" name="ForOtherStaff" id="ForOtherStaff" placeholder="Form For Other Staff? (Enter Username) " onblur="getUserForForm()" title="Form For Other Staff? (Enter Username)" tabindex="5" />
<select id="Title" name="Title" title="User Title" onchange="onTitleChange()" tabindex="7">
<option value="">Select Title...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>
<input type="hidden" name="UserName" id="UserName" /><input type="hidden" name="FormId" id="FormId" />
</div>
<div class="fs-rightDiv">
<input type="text" name="RequestDate" id="RequestDate" placeholder="Request Date " readonly title="Request Date" tabindex="-1" />
<select id="PhysicalSite" name="PhysicalSite" onchange="onSiteChange()" title="Site" tabindex="2" style="border-color:red;"></select>
<input type="text" name="PhoneNo" id="PhoneNo" placeholder="Phone Number " title="Phone Number" tabindex="4" />
<input type="text" name="Payroll" id="Payroll" placeholder="Payroll Number " title="Payroll Number" tabindex="6" />
<input type="text" name="ReplacedName" id="ReplacedName" placeholder="Replaced Name " title="Replaced Name" tabindex="8" />
<input type="hidden" name="UserEmail" id="UserEmail" /><input type="hidden" name="RequestId" id="RequestId" />
</div>
<input type="text" name="Comments" id="Comments" placeholder="Comments " title="Comments" tabindex="9" />
<div id="FixedScroll" class="fixedScroll">
<input type="button" name="save" class="save action-button" value="Save" tabindex="9" />
<input type="button" name="next" class="next action-button" value="Next" tabindex="10" />
</div>
</fieldset>
<fieldset id="fsLevel" title="hidden">
<h2 class="fs-title">Access Level / Item Selection</h2>
<h3 class="fs-subtitle">To add items using a role, please go to next section (Access Item)</h3>
<div id="AllAccessLevelDiv" style="margin-top:20px;">
<span class="GrpTitle" style="width:100%;text-align:left;">Access Level</span>
#(Html.Kendo().DropDownList()
.Name("AccessLevel")
.HtmlAttributes(new { style = "width:100%;text-align:left;margin-bottom:4px;float:left;" })
.DataTextField("Description")
.DataValueField("Code")
//.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAccessLevelList", "Home").Type(HttpVerbs.Post);
});//.ServerFiltering(false);
})
.Events(e => e.Change("AccessListRebind"))
//.Events(e => e.DataBound("DropDownDefaults"))
)
<div id="lstAccessLevelDiv" style="display:none;padding:0px;margin:0px;">
#(Html.Kendo().MultiSelect()
.Name("lstAccessLevel")
.Events(e => e.Change("onAccessLevelItemChange"))
.AutoBind(false)
.IgnoreCase(true)
.Placeholder("Click here to select item(s) ......")
.HtmlAttributes(new { style = "width:100%; float:left;display:block;" })
.DataTextField("AccessItemDesc")
.DataValueField("AccessItemCode")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetAccessLevelItems", "Home").Type(HttpVerbs.Post)
.Data("AccessItemFilter")
)))
</div>
</div>
<div id="fsLevelDiv" style="text-align:left;width:100%;clear:both;padding:0px;margin:0px;">
</div>
<table id="AccessItemSummary1">
<thead>
<tr><th colspan="2">Summary of default / selected access items</th></tr>
<tr>
<th>Name</th>
<th>Value</th>
<th style="display:none">Id</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="FixedScroll1" class="fixedScroll">
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="save" class="save action-button" value="Save" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</fieldset>
</fieldset>
</form>
</div>
The code for opening the pop up:
function OpenForm() {
var dialog, form;
dialog = $("#win1").dialog({
autoOpen: false,
height: 600,
width: 650,
modal: true,
center: true,
resizable: false,
});
dialog.center;
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addUser();
});
var formId, requestStatus, modeColor;
var statusLabel = '';
if (pFormId) {
formId = ' Form Id: ' + pFormId;
statusLabel = '<label id="lblfooter3" class="StatusBar" style="position:relative; margin-bottom:0px; margin-left:160px; float:left; z-index:2000"><a style="color:#747A90; z-index:2000;" onclick="OpenStatusHistoryForm()">View Status History</a></label>'
}
else
formId = 'New Form';
if ((pRequestStatus == 'APPROVED') || (pRequestStatus == 'PENDING') || (pRequestStatus == 'REJECTED')) {
requestStatus = ' Read Only Mode ';
modeColor = 'indianred';
}
else {
requestStatus = ' Edit Mode ';
modeColor = 'darkgray';
}
dialog.dialog({ title: pSystemName + ' - ' + pFormTypeName });
dialog.dialog("open");
//stop main window scrolling
$('body').css('overflow', 'hidden');
$("#lblfooter").remove();
$("#lblfooter2").remove();
$("#lblfooter3").remove();
$("#win1").parent().append('<label id="lblfooter" class="StatusBar" style="position:relative;margin-bottom:0px; float:left; color:darkgray;z-index:2000">' + formId + '</label>' + statusLabel +
'<label id="lblfooter2" class="StatusBar" style="position:relative; margin-bottom:0px; float:right; color:' + modeColor + ';z-index:2000">' + requestStatus + '</label>');
}