[JAVA] [Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery



Development environment

ruby 2.5.7 Rails OS: macOS Catalina


[Ruby on Rails] Displayed only once when accessing for the first time (using jquery.cookie.js) It will be a slightly modified form, so If you use the code as it is, it cannot be displayed until the cookie is gone.

Actual code


<div class="indication-left"></div> #add to
<div class="indication-right"></div> #add to
<div class="box">
  <p>When you press the display end button below,<br>You cannot see it even if you update it.<br>
It will be displayed when you launch a new browser.
  <button>End of display</button>


/*add to*/
/*from here*/
 .indication-left, .indication-right{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-image: url("image1.jpg ");
  background-size: cover;
  background-position: center;
  z-index: 1040;
  transition: 3s;
  left: 0;
  clip: rect(0px 50vw 100vh 0px);
  right: 0;
  clip: rect(0px 100vw 100vh 50vw);
  transform: translateX(-100%);
  transform: translateX(100%);
/*So far*/

  position: absolute;
  top: 40%;
  left: 35%;
  width: 400px;
  height: 200px; 
  background-color: #ffffff;
  z-index: 1050; /*Change*/
.box p{
    padding: 15px;
.box button{
  display: block;
  margin: 0 auto;


  if($.cookie('Flg') == 'on'){
    $(".box").hide(); //Added because it is no longer a child of indication
    $(".indication-right").hide(); //add to
    $(".indication-left").hide(); //add to
    $(".box").show(); //add to
    $(".indication-right").show(); //add to
    $(".indication-left").show(); //add to
  $(".box button").click(function(){
    $(".indication-right").addClass("rightslide"); //add to
    $(".indication-left").addClass("leftslide"); //add to
    $(".box").fadeOut(); //add to
    $.cookie('Flg', 'on', { expires: 1, path: '/' });

About z-index

When using bootstrap, in the implementation of a function like this time Because it had to be displayed higher than .fixed-top We have specified a value higher than 1030.


.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;

About clip: rect ();

What is a clip element? For elements such as images, the contents outside the crop area are not displayed. A property that specifies the crop area. The specification method is rect, and the length of rect is Like rect (distance from the top edge, distance from the right edge, distance from the bottom edge, distance from the left edge), Specify four values in clockwise order from the top, separated by commas.

Image on the right ``` clip: rect (0px 50vw 100vh 0px);`` Image on the left ``clip: rect (0px 100vw 100vh 50vw);` ``


Since there is also a method using css input without using jquery, I think it's important to include both knowledge. I hope to update it soon.

Also, on twitter, technologies and ideas that have not been uploaded to Qiita are also uploaded, so I would be grateful if you could follow me. Click here for details https://twitter.com/japwork

Recommended Posts

[Ruby on Rails] When logging in for the first time ・ How to split the screen in half using jQuery
[Rails 5] How to display the password change screen when using devise
How to create a query using variables in GraphQL [Using Ruby on Rails]
How to build a Ruby on Rails environment using Docker (for Docker beginners)
How to debug the processing in the Ruby on Rails model only on the console
[Ruby On Rails] How to search the contents of params using include?
[Ruby on Rails] How to install Bootstrap in Rails
How to resolve errors that occur in the "Ruby on Rails" integration test
How to implement image posting function using Active Storage in Ruby on Rails
How to set the display time to Japan time in Rails
[Ruby on Rails] How to write enum in Japanese
[Ruby on Rails] How to change the column name
How to study kotlin for the first time ~ Part 2 ~
How to study kotlin for the first time ~ Part 1 ~
[Rails] I tried using the button_to method for the first time
How to set chrony when the time shifts in CentOS7
How to deploy jQuery in your Rails app using Webpacker
How to display a graph in Ruby on Rails (LazyHighChart)
[Ruby On Rails] How to update the calculated result to an integer type column using update_column
How to deploy jQuery on Rails
How to use Ruby on Rails
How to introduce jQuery in Rails 6
Think when Rails (turbolinks) doesn't load the page for the first time
How to solve the unknown error when using slf4j in Java
Things to remember and concepts in the Ruby on Rails tutorial
[Ruby on Rails] How to avoid creating unnecessary routes for devise
How to write the view when Vue is introduced in Rails?
[Ruby on Rails] How to use CarrierWave
Introduction to java for the first time # 2
Preparing to introduce jQuery to Ruby on Rails
[Ruby on Rails] How to use redirect_to
[Ruby on Rails] How to use kaminari
What to do when Blocked Host: "host name" appears in Ruby on Rails
How to implement gem "summer note" in wysiwyg editor in Ruby on Rails
Ruby on Rails DB Tips for creating methods to reduce the load
How to solve the local environment construction of Ruby on Rails (MAC)!
[Ruby] How to prevent errors when nil is included in the operation
[Ruby on Rails] How to make the link destination part of the specified id
I tried using Docker for the first time
The story of intentionally using try catch for the first time in my life
[Ruby on Rails] How to display error messages
How to add / remove Ruby on Rails columns
When the Ruby on Rails terminal rolls back
[Ruby on Rails] Rails tutorial Chapter 14 Summary of how to implement the status feed
Impressions and doubts about using java for the first time in Android Studio
How to use JQuery in js.erb of Rails6
[Ruby on Rails] How to Japaneseize the error message of Form object (ActiveModel)
How to build the simplest blockchain in Ruby
[Ruby on Rails] How to use session method
How to check Rails commands in the terminal
How to implement Pagination in GraphQL (for ruby)
[Ruby On Rails / HTML] How to display the cursor (caret) at an appropriate place when displaying a web page
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
How to get the class name of the argument of LoggerFactory.getLogger when using SLF4J in Java
[Rails / Uniqueness constraint] How to check model validation on the console / Uniqueness constraint for multiple columns
[Ruby on Rails] How to stop when Rails server cannot be stopped by Ctrl + C
[Swift] How to display the entered characters in Widget via UserDefaults when using WidgetKit
[Ruby on Rails] How to implement tagging / incremental search function for posts (without gem)
How to fix the problem that the upper half is cut off when using UITabBar
[Rails] How to solve the error "undefined method` visit'" when using Capybara with Rspec
Explanation of Ruby on rails for beginners ④ ~ Naming convention and how to use form_Tag ~