Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Question

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear.

I've been looking up examples of jquery event handling online and tried implementing it in my app. However, it seems like I may have missed something because there's no response to the mouseover action. If anyone could help me troubleshoot this issue, I would greatly appreciate it. I'm new to web development, rails, and jquery.

Here are the relevant files from my rails project:

list.html.erb - contains all the HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=Q&sensor=false"></script>  
<%= stylesheet_link_tag 'application' %>  
<%= javascript_include_tag 'application'%>  
<%= stylesheet_link_tag 'listings' %>  
<body onload="initialize()">  
    <div id="control_panel">  
    <input type="button" onclick="getlistings();" value="Add Markers">  
    <input type="button" onclick="clearMarkers();" value="Remove Markers">  
    </div>  
    <div id="info"></div>  
    <div id="map_canvas" onmouseover="moveLeft();" ></div>  
</body>

map.js.erb - contains the javascript and jquery functions

function moveLeft()  
{  
    $(function(){ $("#map_canvas").bind("mouseover", shiftLeft) });  
    $(function(){ $("#map_canvas").bind("mouseleave", shiftLeft) });  
}  

function shiftLeft(evt)  
{  
    $("#map_canvas").toggleClass("shifted_mapCanvas");  

}

css file:

#map_canvas  
{  
  width: 90%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html   
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  

}

.shifted_mapCanvas  
{  
  width: 50%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html    
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  
}

jquery html ruby-on-rails css

Answer 1

Answer №1

Addressing the specific question you've raised, it seems like you are attempting to utilize jQuery functions without loading jQuery itself. This could be causing the issues you're facing.

Instead of inline JavaScript calls, a better approach would be to use jQuery in a separate script block as shown below:

<script>
$('div#map_canvas').hover({
  function() { $(this).toggleClass('shifted_mapCanvas'); },
});
</script>

This method should work properly if jQuery is loaded correctly. Refer to the documentation for hover() and toggleClass().

Additionally, I'd like to point out some other areas that may need attention:

banditKing, respectfully, it appears there are fundamental concepts in HTML, CSS, and Rails that require clarification based on your recent questions.

Here's why:

1) Your Rails view file should follow the correct naming convention, such as show.html.erb or index.html.erb. Review the Rails Guide on Creating A Resource.

2) Avoid including body tags within individual views in Rails, as they belong in the layout file to maintain valid markup structure.

3) When working with SCSS, ensure your styling rules comply with valid CSS syntax. Nesting styles for HTML and BODY tags can lead to invalid CSS definitions.

Refer to How to Make a Simple Valid HTML Document for more insights on these topics.

It might also be beneficial to explore resources on unobtrusive JavaScript and deepen your understanding of HTML, CSS, and JavaScript from reputable sources like W3C Schools.

I recommend starting with Michael Hartl's Rails 3 Tutorial to strengthen your foundation in web development.

By investing time in mastering these basics first, you'll significantly reduce future challenges and enhance your proficiency in tackling projects effectively.

I urge you to dedicate effort to learning these fundamentals before progressing further with your current project.

Answer 2

Addressing the specific question you've raised, it seems like you are attempting to utilize jQuery functions without loading jQuery itself. This could be causing the issues you're facing.

Instead of inline JavaScript calls, a better approach would be to use jQuery in a separate script block as shown below:

<script>
$('div#map_canvas').hover({
  function() { $(this).toggleClass('shifted_mapCanvas'); },
});
</script>