*Sorry for formatting: typing from the phone.
Hello guys!
Help me please with a problem: embedded img inside div not changing it's width in respect to it's parent.
<div display="block" position="absolute" width="608.5px" height="480.5px" text-align="center" top="20%" left="50%">
<img src="here_is_source" width="100%" height="auto">
</div>
So, I can't use CSS because I'm appending it using JS (element.appendChild), as well as creating properties of the element using element.setAttribute.
Thank you for suggestions, guys!
You can not set the props you are setting directly to a div. Use style, or insert a CSS style in the JS you describe.
Below solution solves your issue as stated, however also consider using
element.classList.add("my-class");
<div style="display:block;position:absolute; width:608.5px;height:480.5px;text-align:center;top:20%;left:50%;">
<img src="https://via.placeholder.com/400" width="100%" height="auto"/>
</div>
Related
I am trying to call an Image dynamically from thesportsdb API.
After destructuring, I am trying to set the image in the background of this div. But It doesn't show the image. It only works when I add a static image in CSS. It's a react practice project and everything else is working fine.
How may I solve this?
<div style={{background: strStadiumThumb}} className="banner-img">
<img className='img-fluid' src={strTeamBadge} alt="" />
</div>
Firstly, please add the relevant code directly into the question, not pictures of code. Secondly, background isn't a valid div tag attribute. If you want to inline the background style, you can use the style attribute, which is an object property that lets you inline CSS styles into your element:
<div style={{ backgroundImage: `url(${strStadiumThumb})` }} className="banner-img>
...
I am trying to find a way to select the first image found within a div and replace the image source. It specifically must be this method as the image doesn't have an ID (complicated to explain).
$('.promo-unit-site-logo-3').find('img:first').attr'('src', 'blank')')';
I have tried using the above code from googling around and clipping something together however I am by way of javascript a novice.
Any help appreciated!
Thanks,
John
see its working. you mistake in code.
var image = $('.promo-unit-site-logo-3').find('img:first').attr('src', 'blank');
console.log(image.attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="promo-unit-site-logo-3">
<img src="http://placehold.it/280x210" title="first image">
<img src="http://placehold.it/30x20" title="Second image">
</div>
I want to hide my mouse cursor whenever someone goes over the object tag. But cursor:none is not working for objects while it works with rest of the page.
Here is what i am using but i am failing do it.
<object id="obj" class="obj" style="cursor:none;" data='bla-bla.pdf'
type='application/pdf'
width='1000px'
height='640px'>
cursor:none is not working. Please tell me any way to do this.
Just use an overlay; <object>s can act funny.
HTML:
<div id="obj_container">
<object id="obj" src="blablabla.pdf"></object>
<div id="obj_overlay"></div>
</div>
CSS:
#obj_container{
position:relative;
}
#obj{
position:absolute;top:0;left:0;
z-index:2;cursor:none;
}
See this JSFiddle demo for more complete code.
Yes try using div:
Your HTML:
<div style="cursor:none;">
<object id="obj" class="obj" data='bla-bla.pdf' type='application/pdf'
width='1000px' height='640px'>
</div>
How about something like this: http://jsfiddle.net/ZBv22/
It applies a mask over the object element where you specify cursor:none.
The only issue is if you need the object to be clickable/interacted with. Depending on your targeted browsers (modern, IE11+), you could add pointer-events: none to address that.
http://caniuse.com/pointer-events
I have my web pages using HTML5 , JavaScript, Jquery, and CSS3!
It's just the way i need it to be when the window is full screen.
Just as I resize the window, the alignment goes haywire!
I need a simple fix!Please help! Thanks in advance!
Here is a small part of my code:
<img id="myimage1" onclick="changeimage1()" src="images/build_i.png" />
<img id="myimage2" onclick="changeimage2()" src="images/apply_i.png" />
<img id="myimage3" onclick="changeimage3()" src="images/learn_i.png" />
If i resize this window to the minimum the alignment changes.It starts to come one below the other.How do i get rid of that?
Give min-width and min-height to body tag/parent element. (In CSS)
or
Try this: (In jQuery)
$(window).on('ready resize',function(){
// post your code here related to layouts
});
Here is the piece of javascript that correctly identifies a UL element:
$(this.parentNode.nextSibling.nextSibling.children[0]);
The html it looks over is:
(with 'this' referring to the .cs_previousArrow as the initial selector)
<div id="cs_furlBar1">
<p class="cs_furlHeaderClosed">INVESTOR SERVICES</p>
<p class="cs_seeAllFurl">See all</p>
</div>
<div id="cs_investorServ" class="cs_hideOpen">
<div class="cs_previousArrow"><img class="previous_btn" src="images/previousArrow.gif" width="11" height="21" alt=""></div>
<div class="cs_vidThumbClip"></div>
in the div of cs_VidThumbClip, I use the load() action to insert a UL which has the class of cs_vidThumbList
So, the above javascript, after some bouts with Firebug, works but I'm thinking there must be a shorter (or better?) of selecting the same element.
The whole point of this is that I have 5 different divs each which will have its own content loaded to be scrolled so I wanted to avoid have the same code duped and then just the id changed.
Thanks
You can try
$('ul.cs_vidThumbList', $(this).parent().parent())