[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 77
  • Last Modified:

Jquery repalce hyphens

Hello Experts,

Lets take the string "Word-ing", see below,
On large screen the tag <i> is in display block. So the "ing" comes right below the "Word".
On a small screen tag <i> is in display inline and so I need to remove the hyphen right next to the "Word-".

Here is a script i came up with and now my question is how to bring back the hyphen when resize to large screen. The issue is also that my code removes the tag "i" totally, not sure why.

<span class="hyphen">Word- 
   <i>ding</i> 
</span>

Open in new window


$(window).bind('load resize',function() {
			
		if ($(document).width() <= 1023) {
				
			var hyphen = $(".hyphen");
			
			hyphen.each(function() {
			
			$(this).html($(this).text().replace("-",""));
			
			});
		} else {
			
			//$(".hyphen").children("i").before("-");
		}
});

Open in new window

0
Refael
Asked:
Refael
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
You could put the hyphen in a span by itself and display that span only in your small screen responsive styling.
<span class="hyphen">Word<span class="largescreen">-</span>
   <i>ing</i> 
</span>

Open in new window

/* Default CSS */
span.largescreen { display: none; }

@media screen and ([small screen parameters here]) {
span.largescreen { display: inline; }

Open in new window

0
 
RefaelAuthor Commented:
Hello Kim, you are so right! What was I thinking trying to resolve this with jQuery. Thank you!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now