Adding hyperlink dynamically to images using jquery cycle plugin for transitions - php

I am working on a slideshow using the jquery cycle plugin for transitions.
Now all works fine till I add a hyperlink to the image.I am trying to add a hyperlink if a user wishes to add so i have a set button for each image in my console.If a user selects a hyperlink and clicks set,it should be set.Now the hyperlink is set correctly,but,then the transitions are applied to the anchor tags instead of the img tags.
When I set the link the img tag is wrapped inside the anchor tag like this.
<a href="www.google.com" id="link" class="link">
<img id="imgBoxRot_1_1" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;" src="http://localhost/images/layout/slideShow/gallImg1.jpg">
</a>
I create this anchor tag dynamically like this,and append it to the image.
var newA = document.createElement("a");
newA.setAttribute("id","lnkImgRotImg_"+iCount+"_"+idT);
newA.setAttribute("href",document.getElementById(lnk).value);
newA.setAttribute("class","aTransLink");
newA.setAttribute("target","_blank");
Before setting the anchor tag the plugin works fine and transitions are applied,but after adding a anchor to image,the transitions are applied to the anchor tag instead of the image.How can I fix this?
Thanks for the time.

After studying the plugin documentation I learned that,the plugin is default applied to the first tag that is inside the div to which it is applied.
That is,if we have
<div class="">
<img></img>
<img></img>
</div>
Now,if I wrap an anchor around the image like this,
<div class="">
<a href="">
<img></img>
</a>
<img></img>
</div>
The plugin gets confused between an image tag and an anchor tag and applies the transitions to the anchor instead of the image tag(as it is the first after the div to which the cycle plugin is applied). Therefore,I wrapped all the images initially inside an anchor tag each(Earlier I added anchors dynamically) and applied the plugin on the anchors itself instead of image tag.

Related

How to remove div tag wrapped around radio button?

I am facing difficulties for styling my form. This is the HTML code snippet of the web page.
<li class="gchoice_8_8_0">
<div class="tetapose_radio">
<input id="choice_8_8_0" type="radio" onclick="gf_apply_rules(8,[0,33,38,39,9,10,89,91,35,34]);" tabindex="16" value="0|0" name="input_8">
<label for="choice_8_8_0"></label>
</div>
<label id="label_8_8_0" for="choice_8_8_0">
<span class="column">
Code
</span>
</label>
</li>
Now, what I want to do is style the span in the label which is out of the div tag wrapped around radio input
I tried this code with no luck
li .tetapose_radio input[type="radio"]:checked ~ li label .column {
box-shadow: 0px 4px 10px #1f8bcf !important;
border-bottom: 1px solid #fff;
z-index: 999;
}
We can use
:checked + label
But it works only on label that immediately follows the input tag.
This is the code from WordPress site and div tag is wrapped by the theme itself, I don't know how to remove that tag. If anyone knows how to remove div tag wrapped around radio button using function then that would be awesome.
Otherwise CSS trick would do fine.
I guess you can use a preg_match with this regex which return the content of the div,
#<div.*(?<=class=)"tetapose_radio".*>(.*)<\/div>#sU
and then replace the div with the input inside with the content returned by the preg_match (to find the div you can use the same regex).
Normally it will do the trick :)
Ok I found a way around.
It was a problem of gravity forms custom fields.
I replaced the custom fields to normal fields and now
label is inside the div tag.
So, now I can style It :D
Thanks for your responses...

How would you add a hyperlink to a BG img using CSS?

CSS
header.site-header .wrap {
background: url(http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg) right top no-repeat;
}
This is what I am working with.
Any insight would be grateful.
Here is the home.php code.
You cannot do this using CSS.
What you've done here is just passed the URL for the background.
If you want to add a link to the image, you can do this either by using a pair of anchor tags.
EG:
Add this in your HTML :
<a href='#'>
<img src="...." />
</a>
OR by adding a click event on to the div.
EG:
$(document).ready(function(){
$('header.site-header .wrap').click(function(){
window.location.href = "Link";
});
});
You could do something simpler:
<div>
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
This creates a link that is an image.
EDIT after more info came to light.
From what I've gathered so far... you're using the "Open Floor Plan" Theme for Wordpress. (Maybe ask them for support? After all you paid for a theme.)
The simple method and recommended:
That theme appears to have a widget position at the top right. Why not use that to add your banner-link?
The hard-way hacking not-recommended method:
In wordpress you can edit the theme files (not recommended) by going to Appearance then Editor. This will open up the theme editor view and on the right side you'll see all the files of the currently active theme. You then could search those files for the HTML tag and add the above modifications.
The file that could have what you're looking for could be the header.php or index.php, but if it isn't there just sift through the other files until you find it.
The html markup would look something like this:
<header class="site-header">
<div class="wrap">
It will contain more stuff in here...
</div>
</header>
It will probably contain a lot more classes and PHP code...
The Widget Method
Add your banner code in a Text widget. You can add the CSS styling in-line, so that you won't have to upload anything else.
Add the CSS property for the parent container:
<style>header.site-header .wrap { position:relative; }
Then add the CSS for your element:
.mybanner { position:absolute; top:0; right:0; z-index:1; }
/* the widget with the social icons will probably need z-index aswell */
.CLASS-of-other-widget { position:relative; z-index:2; }
</style>
Now add your HTML code:
<div class="mybanner">
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
Please note that with the z-index, the other widget will cover the banner and the ability to click it. You could simply use another position for that widget and just have the banner there.
Hi all and thank you for the help.
I have found a solution. I left the image on the BG, then added a widget to the top right of the page where the image (banner sits), then added a text box to the widget area and added this
<div class="topbanner" onclick="window.location='http://jadeluxurycondos.com/jadeluxurycondos-new/jade-signature/'" style=" height: 102px;left: 37.5%;position: absolute;top: 0; margin-top: 32px;width: 585px;cursor: pointer;"><div>
The image appears to be clickable. Check here to see it in action.

how can i add an id to an image tag using php or jquery if the image source is equal to something specific in url form?

how can i add an id to a image tag using php or jquery if the image source is equal to something specific in url form?
i am very new to php and jquery and i come across and interesting problem i have a website called lingeriesshop.net and im trying to add live chat to the site but the custom live chat image i have selected in my chat plugins console is appearing with 50px of space between the image and the side of my page. the code is being generated from serverside scripts running through the chat service so i cannot add or remove css classes or id's in a traditional way in order to adjust the image position. i was suggested a solution to use jquery to add a class to the image using this jquery code to add css to the class to move the image 50px
$("#imageID").addClass("classname");
but the image code i am trying to add a class to does not have an inline #id and im not to familiar with image id's in wordpress in general here is the image code i get from firebug.
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
is it possible to write an if statement to where if the image tags src is equal to a set value then add an id to the image tag to later reference the id and add a class to adjust its position? im not a php experienced person so im not sure if this is possible or how to go about it im just trying to move my image over 50px
$('img[src="image.jpg"]').addClass('classname');
or
$('img[src*="image.jpg"]').addClass('classname'); // this will find every image src containing "image.jpg"
If your img is wrapped in a div or other element, you can reference it in your CSS without a class.
If the html is something like this...
<div id='chatwindow'>
<div id='conversation'>
...
</div>
<div id='userinput'>
<input type="text" />
</div>
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
</div>
Then you can use CSS to move the img 50px to the right...
#chatwindow img {margin-left: -10px !important;}
You can edit an element's attribute directly using attr. You can use this to give the image an ID which you can later use to refer to.
$('img[src="image.jpg"]').attr('id','yourIDHere');
$('yourIDHere').addClass('classname');
You can access image using it's source , and add attribute and a class like this :
$('img[src="image_path"]').attr('id','sampleID').addClass('classname');

css li flow around each other (image attached)

I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/

jquery mobile list view Css issue when adding href link

For jquerymobile list view, I tried ui-grid-b for 3 columns. but CSS issues...jsfiddle.net/9ZBAS/1 I tried and i could see columns overlapping if i use href and working fine if not using href but without href i couldnt get the next icon button.
You can clip the overflowing text by using the following styles:
div {
white-space: normal;
overflow: hidden;
}
The right-arrow is added by JQM as part of its internal/auto styling of <a> links in <li>.
If you are not using <a>, you will have to manually add the arrow by doing something like this http://jsfiddle.net/nirmaljpatel/9ZBAS/2/

Categories