#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0

    CSS Content Tag help please!


    I have hit a wall with the development of my website. I'm sure a CSS guru will know how to fix the issue I am having very quickly.

    Here's a brief description of the issue:

    I have a CSS "content" call that is initiating plain text fine, but i need it to rather create text that will be clickable, to call up an iframe lightbox (Colorbox).

    The function must also work with webkit (ie: on iOS as the rest of the site has been made to work on these devices too)

    Here's some code Snippets:

    The Attribute (not sure exactly where to put this)
    Code:
    <a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a>
    This is the js which links to the css file (which is in the right location)
    Code:
    <link rel="stylesheet" href="colorbox.css" />
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    		<script src="../jquery.colorbox.js"></script>
    		<script>
    			$(document).ready(function(){
    				//Examples of how to assign the Colorbox event to elements
    				$(".group1").colorbox({rel:'group1'});
    				$(".group2").colorbox({rel:'group2', transition:"fade"});
    				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    				$(".group4").colorbox({rel:'group4', slideshow:true});
    				$(".ajax").colorbox();
    				$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
    				$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
    				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    				$(".inline").colorbox({inline:true, width:"50%"});
    				$(".callbacks").colorbox({
    					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
    					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
    					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
    					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
    					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    				});
    
    				$('.non-retina').colorbox({rel:'group5', transition:'none'})
    				$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
    				
    				//Example of preserving a JavaScript event for inline calls.
    				$("#click").click(function(){ 
    					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
    					return false;
    				});
    			});
    		</script>

    And this is where I need the clickable text to be displayed:
    Code:
    .set-speed #IMAGES dl.infos dd:after {
      content: 'Clickable text that opens lightbox iFrame'; }
    Thanks for your help in advance!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    I guess I don't exactly understand what you are asking.

    You need the text within the 'content:' to be clickable? If that is what you are asking, why not add a click event listener in your JS for this tag, or maybe use a different tag altogether that has the clicking functionality already built into it, such as an anchor or button tag.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0
    Thanks for the tip, although the issue is that the tag is not "visable" by the mouse events (like a div is covering it so it cannot be accessed.

    I will PM you the link.

    (the ASTRONOMY logo that is moving around with the text on the images planet is a hyperlinked image - but not clickable)

    Thanks again for the help.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    3
    Rep Power
    0
    Hmm, seems I dont have enough privileges yet to send a PM.

    try
    Code:
    <a>http://www.voyager-retreats.com/astronomy/astronomy2014/ASTRONOMY4.html</a>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    You can't click on it because it's not a link. It's not a link because you are not using anchor tags around the text since you're inserting it by way of content in the CSS.

    You would have to target this with your jQuery, but the event listeners won't work because you can't really target pseudo selectors with jQuery. You could try adding a class to the tag that is having the content and then target the class and throwing a click on it. And you might have to make sure the z-index of this tag is higher than the rest.

    I was also thinking if you could maybe force an href attribute onto a non-anchor tag thru jQuery, but that sounds like a really sketchy way of doing it and it probably wouldn't work.

IMN logo majestic logo threadwatch logo seochat tools logo